jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

jQueryでHTML要素を追加するメソッドが色々あるので整理するために、ちょっとまとめてみました。似たようなメソッドの名前なので混乱しそうです。大きく分けるとbefore,after,prepend,appendと、insertBefor,insertAfter,prependTo,appendToが似ているのでそれらの違いをまとめてみます。

before, after, prepend, append

挿入先の要素を基点にした場合、beforeとafterは外側に挿入されます。逆にprependとappendは挿入先要素の内側に挿入されるんですね。使い方は以下です。

JavaScript

<script type="text/javascript">
$(function(){
     $('#sample')
         .before('<div>before</div>')
         .after('<div>after</div>')
         .prepend('<span>prepend</span>')
         .append('<span>append</span>');
});
</script>

HTML

<p id="sample">サンプル</p>

実行するとこのように追加されています。

<div>before</div>
<p id="sample">
<span>prepend</span>
サンプル
<span>append</span>
<div>after</div>

各メソッドによって挿入される場所が違うのがわかりますね。

insertAfter, insertBefore, prependTo, appendTo

こちらも要素を挿入するメソッドなんですが、書き方が少し違ってきます。指定する挿入先の要素を最後に記述するので、さっきとは逆の書き方になります。実際の使い方はこんな感じです。

JavaScript

<script type="text/javascript">
$(function(){
     $('<div>insertBefore</div>').insertBefore('#sample');
     $('<div>insertAfter</div>').insertAfter('#sample');
     $('<span>prependTo</span>').prependTo('#sample');
     $('<span>appendTo</span>').appendTo('#sample');
});
</script>

HTML

<p id="sample">サンプル</p>

これで実行してみると以下のように挿入されます。

<div>insertBefore</div>
<p>
<span>prependTo</span>
サンプル
<span>appendTo</span>
</p>
<div>insertAfter</div>

ちゃんと挿入されてますね。ちなみに移動なんかもできちゃいます。

JavaScript

<script type="text/javascript">
$(function(){
     $('span').insertBefore('#sample');
});
</script>

HTML

<p id="sample">サンプル<span>移動</span></p>

これを実行するとspan要素が#sampleの外側に移動します。

<span>移動</span>
<p id="sample">サンプル</p>

まとめ

結構使う頻度が高そうなメソッドなので是非覚えておきたいですね。上記以外にもhtml、textメソッドでも追加したりできるので、どんな時にどんなメソッドを使うべきなのかまだわかんない状態なんですが、使いながら覚えていければいいなと思ってます。