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"><b>Hello Wolrd</b></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>
ページのトップへ戻る