本記事では、jQueryで親要素を追加するwrap・wrapAll・wrapInnerの使い方と違いについて解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
jQueryの学習におすすめ参考書
jQuery最高の教科書
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
コンテンツ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
コンテンツ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
コンテンツ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で指定要素の前に要素を追加する方法(prepend,before)本記事では、jQueryで指定要素の前に新しい要素を追加するprepend()・prependTo()・before()・insertBefore()の使い方と違いについて解説しています。...

jQueryで指定要素の後に要素を追加する方法(append,after)本記事では、jQueryで指定要素の後に新しい要素を追加するappend()・appendTo()・after()・insertAfter()の使い方と違いについて解説しています。...