Written by Kasumi

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です。

目次

関連記事

jQuery

jQueryを使って簡単にタブ切り替えを実装してみよう

更新日:2022.09.09
185
jQuery

webサイトにテキストコピーボタンを設置する方法【簡単】

更新日:2022.09.09
67
jQuery

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

更新日:2022.09.09
535
jQuery

固定ヘッダーでアンカーリンクがずれる・隠れる場合の対処方法 【スムーズスクロール対応】

更新日:2022.09.09
1542