jQueryで要素の追加

jQueryで要素を追加する方法について書きます。
以下に対して操作を行います。

<div id="div1">
    <div id="div2"></div>
</div>

・内部に追加
$(A).prepend(B)
$(B).prependTo(A)
$(A).append(B)
$(B).appendTo(A)

要素に子要素を追加するには、先頭ならprependまたはprependTo、末尾ならappendまたはappendToを使用します。AにBが追加され、$(A)または$(B)のjQueryオブジェクトが戻り値となります。

$.('#div1').prepend('<div id="addDiv1"></div>')
                 .append('<div id="addDiv2"></div>');

<div id="div1">
    <div id="addDiv1"></div>
    <div id="div2"></div>
    <div id="addDiv2"></div>
</div>

・前後に追加
$(A).before(B)
$(B).insertBefore(A)
$(A).after(B)
$(B).insertAfter(A)

要素の前後に要素を追加するには、前ならbeforeまたはinsertBefore、後ならafterまたはinsertAfterを使用します。Aの前にBが追加またはAの後にBが追加され、$(A)または$(B)のjQueryオブジェクトが戻り値となります。

$.('#div1').before('<div id="addDiv1"></div>')
                 .after('<div id="addDiv2"></div>');

<div id="addDiv1"></div>
<div id="div1">
    <div id="div2"></div>
</div>
<div id="addDiv2"></div>

・周囲に追加
$(A).wrap(B)

要素の周囲を囲んで追加するにはwrapを使用します。Aの周囲にBが追加されます。

$.('#div1').wrap('<div id="addDiv1"></div>');

<div id="addDiv1">
    <div id="div1">
        <div id="div2"></div>
    </div>
</div>