jQueryで親要素を追加する方法(wrap,wrapAll,wrapInner)

2022年6月4日2023年7月17日

本記事では、jQueryで親要素を追加するwrap・wrapAll・wrapInnerの使い方と違いについて解説しています。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2023/09/30 22:33時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

wrapメソッドの使い方

wrapメソッドは、$(“要素名”)で指定した対象の要素に対して新しく親要素としてタグを追加し要素を囲います。対象の要素が複数ある場合は、各要素ごとに親要素を作成します。

wrapメソッドの使い方は以下のとおりです。

$("要素名").wrap("タグ");

wrapメソッドを使ったサンプルコードと実行結果は以下のとおりです。

<div class="content-a1">
  <p>コンテンツA</p>
</div>
<div class="content-b1">
  <p>コンテンツB</p>
</div>
<div class="content-b1">
  <p>コンテンツB</p>
</div>
<div class="content-c1">
  <p>コンテンツC</p>
</div>
<button id="trigger-btn1">親要素を作成する</button>

.bg-skyblue{
  background:skyblue;
}

$("#trigger-btn1").on("click",function(){
  $(".content-b1").wrap("<div class='bg-skyblue'></div>");
});

サンプルコード動作確認

コンテンツA

コンテンツB

コンテンツC

実行後のDOM

<div class="content-a1">
  <p>コンテンツA</p>
</div>
<div class="bg-skyblue">
  <div class="content-b1">
    <p>コンテンツB</p>
  </div>
</div>
<div class="bg-skyblue">
  <div class="content-b1">
    <p>コンテンツB</p>
  </div>
</div>
<div class="content-c1">
  <p>コンテンツC</p>
</div>

wrapAllメソッドの使い方

wrapAllメソッドは、wrapメソッドと同様に$(“要素名”)で指定した対象の要素に対して新しく親要素としてタグを追加し要素を囲います。

2つの異なる点は対象の要素が複数ある存在する場合、wrapメソッドは各要素に対して親要素を追加していましたが、wrapAllメソッドは対象となる要素を一つにまとめて親要素を追加します。

wrapAllメソッドの使い方は以下のとおりです。

$("要素名").wrapAll("タグ");

wrapAllメソッドを使ったサンプルコードと実行結果は以下のとおりです。

<div class="content-a2">
  <p>コンテンツA</p>
</div>
<div class="content-b2">
  <p>コンテンツB</p>
</div>
<div class="content-b2">
  <p>コンテンツB</p>
</div>
<div class="content-c2">
  <p>コンテンツC</p>
</div>
<button id="trigger-btn2">親要素を作成する</button>

.bg-yellow{
  background:yellow;
}

$("#trigger-btn2").on("click",function(){
  $(".content-b2").wrapAll("<div class='bg-yellow'></div>");
});

サンプルコード動作確認

コンテンツA

コンテンツB

コンテンツC

実行後のDOM

<div class="content-a2">
  <p>コンテンツA</p>
</div>
<div class="bg-yellow">
  <div class="content-b2">
    <p>コンテンツB</p>
  </div>
  <div class="content-b2">
    <p>コンテンツB</p>
  </div>
</div>
<div class="content-c2">
  <p>コンテンツC</p>
</div>

wrapInnerメソッドの使い方

wrapInnerメソッドは、$(“要素名”)で指定した対象の要素内にある子要素に対してタグを囲います。

wrapInnerメソッドの使い方は以下のとおりです。

$("要素名").wrapInner("タグ");

wrapInnerメソッドを使ったサンプルコードと実行結果は以下のとおりです。

<div class="content-a3">
  コンテンツA
</div>
<div class="content-b3">
  コンテンツB
</div>
<div class="content-b3">
  コンテンツB
</div>
<div class="content-c3">
  コンテンツC
</div>
<button id="trigger-btn3">親要素を作成する</button>

.c-red{
  color:red;
}

$("#trigger-btn3").on("click",function(){
  $(".content-b3").wrapInner("<p class='c-red'></p>");
});

サンプルコード動作確認

コンテンツA

コンテンツB

コンテンツC

実行後のDOM

<div class="content-a3">
  コンテンツA
</div>
<div class="content-b3">
  <p class="c-red">コンテンツB</p>
</div>
<div class="content-b3">
  <p class="c-red">コンテンツB</p>
</div>
<div class="content-c3">
  コンテンツC
</div>

jQueryで親要素を追加する方法(wrap,wrapAll,wrapInner)

wrapメソッドの使い方

wrapAllメソッドの使い方

wrapInnerメソッドの使い方

要素追加の関連記事