jQuery 画面操作

今回は画面操作をやります。

要素内の書き換え

要素内のHTMLを書き換えるにはhtml()メソッド、text()メソッドを使用します。

メソッド	説明
html()	HTMLで要素内を書き換える。またはHTMLとして取得する。
text()	文字列で要素内を書き換える。または文字列として取得する。

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		$("#id1").html("<b>Hello Wolrd</b>");
		$("#id2").text("<b>Hello Wolrd</b>");
	});
</script>
</head>
<body>
	<div id = "id1"></div>
	<div id = "id2"></div>
</body>
</html>

上記の処理は実行後、以下のようになります。

				
<body>
	<div id="id1"><b>Hello Wolrd</b></div>
	<div id="id2">&lt;b&gt;Hello Wolrd&lt;/b&gt;</div>

</body>

指定位置に挿入

指定位置に挿入するにはbefore()、after()、prepend()、append()メソッドを使用します。

メソッド	説明
before()	指定要素の前にHTMLを埋め込む
after()	指定要素の後ろにHTMLを埋め込む
prepend()	指定要素内の先頭にHTMLを埋め込む
append()	指定要素内の最後にHTMLを埋め込む

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		$("#id1").before("要素の前");
		$("#id1").after("要素の後");
		$("#id1").prepend("最初---");
		$("#id1").append("---最後");
	});
</script>
</head>
<body>
	<div id = "id1">要素内</div>
</body>
</html>

上記の処理は実行後、以下のようになります。

				
<body>
	要素の前<div id="id1">最初---要素内---最後</div>要素の後

</body>

以下のメソッドでも挿入ができます。挿入位置と要素指定が逆になります。

メソッド	説明
insertBefore()	指定要素の前にHTMLを埋め込む
insertAfter()	指定要素の後ろにHTMLを埋め込む
prependTo()	指定要素内の先頭にHTMLを埋め込む
appendTo()	指定要素内の最後にHTMLを埋め込む

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		$("<p>要素の前</p>").insertBefore("#id1");
		$("<p>要素の後</p>").insertAfter("#id1");
		$("<b>最初-</b>").prependTo("#id1");
		$("<b>-最後</b>").appendTo("#id1");
	});
</script>
</head>
<body>
	<div id = "id1">要素内</div>
</body>
</html>

上記の処理は実行後、以下のようになります。

				
<body>
	<p>要素の前</p><div id="id1"><b>最初-</b>要素内<b>-最後</b></div><p>要素の後</p>

</body>

削除、置換

削除するには、remove()、empty()メソッドを使用し、置換するには、replaceWith()、replaceAll()メソッドを使用します。

メソッド	説明
remove()	要素を含めて全体を消す
empty()	指定要素の中身を消す
replaceWith()	要素を書き換える
replaceAll()	要素を書き換える

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		// 全体消える
		$("#id1").remove();

		// 中身が消える
		$("#id2").empty();

		// 置換①
		$("#id3").replaceWith("新しい文字列①");

		// 置換②
		$("<p>新しい文字列②</p>").replaceAll("#id4");
	});
</script>
</head>
<body>
	<div id = "id1">全体消える</div>
	<div id = "id2">中身が消える</div>
	<div id = "id3">置き換え①</div>
	<div id = "id4">置き換え②</div>
</body>
</html>

上記の処理は実行後、以下のようになります。

				
<body>

	<div id="id2"></div>
	新しい文字列①
	<p>新しい文字列②</p>

</body>

指定要素を囲む

指定要素を囲むには、wrap、wrapInner、wrapAllにを使用します。囲んでいる要素を消すには、unwrapを使用します。

メソッド	説明
wrap()	指定要素の外で囲む
wrapInner()	指定要素の中で囲む
unwrap()	指定要素の親要素を消す
wrapAll()	指定要素全体の外で囲む

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(function() {
		// 指定要素を囲う
		$("#id1").wrap("<div id='id5'/>");

		// 指定要素の中身を囲う
		$("#id2").wrapInner("<span id='id6'/>");

		// 指定要素の親を消す
		$("#id4").unwrap();

		// 指定要素全体を囲う
		$("a").wrapAll("<div id='id7'/>");

	});
	
</script>
</head>
<body>
	<p id = "id1">中身①</p>
	<p id = "id2">中身②</p>
	<p id = "id3"><span id = "id4">中身③</span></p>
	<a href="test">リンク①</a>
	<a href="test">リンク②</a>
</body>
</html>

上記の処理は実行後、以下のようになります。

				
<body>
	<div id="id5"><p id="id1">中身①</p></div>
	<p id="id2"><span id="id6">中身②</span></p>
	<span id="id4">中身③</span>
	<div id="id7"><a href="test">リンク①</a><a href="test">リンク②</a></div>
</body>

ページのトップへ戻る