DOMの移動・挿入

wordpressの繰り返しカスタムフィールドに入れられたHTMLタグを
PHP側で任意のHTMLタグを挟んだ状態にreplaceして一括出力しようとしていたところ仕様上実現できず苦戦していたのですが、
jQuery側で実装すればよかったようで・・・
知らないまま頑なにムリだと思ってた自分を殴る気持ちで
初歩的ですがDOMの移動や挿入操作についてまとめました。
（HTMLの組み方がガチャガチャなのですがご容赦ください）

##出てくるメソッド
・prepend
・append
・before
・after
・insertBefore

##HTML側
こんな感じのHTMLがあり、この要素をわちゃわちゃやって・・・

一旦このようにしたいと思います。

##jQuery

$function(){
//beforeは指定要素の前に挿入
$('#song').before('<div class="jpop">J-POP</div>');
//prependは指定要素の子要素の先頭に挿入
$('#song').prepend('<h1>天体観測</h1>');
//appendは指定要素の子要素の末尾に挿入
$('#song').prepend('<p class="a_melo">午前二時フミキリで</p>');
//afterは指定要素の後に挿入
$('#song').before('<div class="jazz">JAZZ</div>');
});

補足：閉じタグに関しては自動補完されます。
参考サイト様：jQueryでタグが自動補完される | cly7796.net

このメソッドたちはあくまで要素を挿入・移動するもので、
beforeで<div class="jpop">,afterで</div>を挿入としたいときは
$('h1').wrap('<div class="jpop"></div>');
のようにwrapを使ってあげると必要な要素が全部中に入れられると思います。
wrapAllですべてのh1を中に入れるみたいなこともできるようです。

さらに移動したい要素を移動させます。

$function(){
//insertBeforeで要素を後ろに移動させる
$('.c_melo').insertBefore('.a_melo');
)};

先ほどのメソッドたちとは要素の指定が逆になり、

$function(){
//insertBeforeで要素を後ろに移動させる
$('移動させたい要素').insertBefore('ターゲットになる要素');
)};

となります。

完成！

##まとめ
・prepend
・append
・before
・after
・insertBefore
で要素を移動したり挿入できたりできました
囲いたいなど別目的がある場合は別のメソッドを使用する必要があります（wrapなど）