jqueryを使って要素を移動・追加・親要素を作成する方法【簡単テンプレ公開】
ASPやワードプレス等を使っていると、htmlが自動生成の為編集出来ないなどたまにありますよね？
そんな時、html要素をある要素の間に移動・追加する、または親要素を作成し、ある要素を内包したい事ありませんか？？
上記のような悩みにjqueryを使って回答します！
本記事ではjqueryを使って移動・追加・親要素を作成するテンプレソースを下記順番で紹介していきます。
（※事前準備としてjqueryを使うので、CDNもしくはファイルを読み込んどきましょう。）
jqueryで要素を移動する方法
上記ソースが移動する系統の記述になります。移動する先のセレクタを指定し、
移動するメソッド、入れる要素を指定します。
内訳としては
insertBefore()：ある要素の前に移動
prependTo()：ある要素内部の先頭に移動
insertAfter()：ある要素の後に移動
appendTo()：ある要素内部の最後に移動
移動する先の要素名と移動する要素を指定するだけでOKです。
場面によって使い分けましょう。
jqueryで要素を追加する方法
上記ソースが追加する系統の記述になります。追加する先のセレクタを指定し、
追加するメソッド、例としてpタグを追加してます。
内訳としては
before()：ある追加先要素の前に生成したタグを追加
prepend()：ある追加先要素内部の先頭に生成したタグ追加
after()：ある追加先要素の先頭に生成したタグを追加
append()：ある追加先要素内部の最後に生成したタグを追加
追加する任意のタグに変更し、場面によって使い分けましょう。
jqueryを使って親要素を作成
上記ソースが親要素を作成する系統の記述になります。ある要素セレクタを指定し、親要素を作成するメソッド、親要素のタグを入れます。
今回は例としてdivタグを挿入します。
内訳としては
wrap()：ある要素を生成した親要素で囲む
wrapAll()：ある要素が複数ある場合、まとめて生成した親要素で囲む
wrapInner()：ある要素内部の子要素をまとめて生成した親要素で囲う
また、逆に親要素を削除する場合はunwrap()メソッドを記述すればOKです。
