jQuery prependとappendの違いと要素の追加
jQuery prependとappendの違い
prependとappendの違いはprependは指定した要素の要素の先頭に追加されます。
appendは指定した要素の最後に要素が追加されます。
共通点は指定した要素に要素を追加することです。
違うのは追加する場所ですね。
jQuery prepend 先頭に要素の追加
prependの英語の意味は先頭に追加という意味です。
そのまんまです（笑）
サンプル
$(“セレクタ”).prepend(“追加するタグ”)
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3”).prepend(“pink”)
});
</script>
<title>
</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
タグを書かないで文字列だけを指定すると先頭のタグの文字列の前に文字列が追加されてしまいます。
実行結果は
pinkred
pinkGreen
pinkyellow
pinkBlue
文字列がh3の前に追加されてしまってます。
新しく要素が追加されていません。
これはこれで別に使い道がありそうな気もしますが
要素が同じなら同じ要素を指定して追加をしてしてやりましょう。
サンプル2
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3”).prepend(“<h3>pink</h3>”)
});
</script>
<title>
</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
実行結果は
pink
red
pink
Green
pink
yellow
pink
Blue
あれ、期待してたのと違う。
h3タグの全ての先頭に要素が追加されました。
コンピュータは正直者ですね。
私の指定の仕方が悪かったです。
指示は明確にしないといけません。
redクラスだけの先頭に追加したいだからredクラスと
セレクタに指示してやらないとね。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.red”).prepend(“<h3>pink</h3>”)
});
</script>
<title>
</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
実行結果は
pink
red
Green
yellow
Blue
ちゃんと先頭に表示されましたね。
jQuery append 最後に要素の追加
appendの英語の意味は添える，付加[追加]する。
追加するは一緒ですね。
基本的な動作はprependと一緒ですね。
挿入場所だけ違います。
文字列だけだと要素の末尾に表示されます。
redクラスの末尾に追加しましょう。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.red”).append(“<h3>pink</h3>”)
});
</script>
<title>
</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
実行結果は
red
pink
Green
yellow
Blue
ちゃんとredクラスの最後に書かれてますね。
このサンプルだと追加したいクラスをhtmlで指定しないといけないみたいですが
この為だけにクラスの追加はどうなんでしょうね。
htmlで直接書かなくてもaddclassメソッドで動的に追加できますので合わせ技ということで書いておきますね。
そうですね。
Blueにブルークラスを動的に追加して最後にpinkを挿入します。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3:last-child”).addClass(“Blue”)
$(“.Blue”).append(“<h3>pink</h3>”)
});
</script>
<title>
</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
実行結果は
red
Green
yellow
Blue
pink
ちゃんとできましたね。
last-childdで要素をクラスを追加してちゃんとクラスで指定してます。
気づいた方もいると思いますがクラス指定する意味ありませんよね。
last-childdでそのまま書けよ（笑）
三流プログラマーの本領発揮してしまいました。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“h3:last-child”).append(“<h3>pink</h3>”)
});
</script>
<title>
</title>
</head>
<body>
<div>
<h3 class=”red”>red</h3>
<h3>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
実行結果は同じですが一回の処理なのでこのほうが高速化できてます。
セレクタは便利ですね。
処理のタイミングや条件があるならクラス使ってもいいと思います。
セレクタで指定するかhtmlにクラス書くかは自由です多分。
[…] jQuery prependとappendの違いと要素の追加 […]