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

Ads

関連記事

JavaScript プログラミング

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

2020.03.28
245
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
141
プログラミング

MANPローカルサーバーで400 Bad Request errorになりサイトが表示されない【解決!ローカルのドメイン・ディレクトリ名が原因かも?】

2022.04.18
26
HTMLCSS プログラミング

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
246