jQueryで要素を移動する方法のまとめ

jQueryで要素を移動する際、insertBefore / insertAfter / prependTo / appendToと色々あるものの、どのメソッドがどういう挙動だったかうろ覚えで毎回Google検索していた。さすがに毎回検索するのは面倒臭い上に時間がかかるのでこのページにまとめておく。

HTML要素

<div id="div_1">
    <span id="span_1">span_1</span>
    <span id="span_2">span_2</span>
</div>

<div id="div_2">
    <span id="span_3">span_3</span>
    <span id="span_4">span_4</span>
</div>

上記のHTML要素を対象とする。

指定した要素の前に移動(insertBefore)

//$('移動する要素').insertBefore('移動先');
$('#span_1').insertBefore('#div_2');

指定した要素の後ろに移動(insertAfter)

//$('移動する要素').insertAfter('移動先');
$('#span_1').insertAfter('#div_2');

指定した要素の内側の先頭に追加(prependTo)

//$('移動する要素').prependTo('移動先');
$('#span_1').prependTo('#div_2');

指定した要素の内側の最後に追加(appendTo)

//$('移動する要素').appendTo('移動先');
$('#span_1').appendTo('#div_2');

注意点

似たメソッドでbefore / after / prepend / appendがあるが「要素ごとの移動ではなく要素自体の追加」「追加内容と追加先の記述が逆」となる点に注意。例えば以下のように記述すると、

$('#div_2').before('#span_1');

以下のような出力になる。

<div>
    <div id="div_1">
        <span id="span_1">span_1</span>
        <span id="span_2">span_2</span>
    </div>

    #span_1
    <div id="div_2">
        <span id="span_3">span_3</span>
        <span id="span_4">span_4</span>
    </div>
</div>

そのためJSの変数内とかにHTMLタグとか書き込んでいって出力させたいというような場合にbefore / after / prepend / appendメソッドを使用し、既に出力されているものを丸ごと移動したいというような場合はinsertBefore / insertAfter / prependTo / appendToメソッドを使用するという形になりそう。