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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者	株式会社シフトブレイン
発売日	2013/11/26
ページ数	320ページ
Kindle版	○
レビュー (Amazon)	(93件)

jQuery最高の教科書 [ シフトブレイン ]

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

Contents

1 wrapメソッドの使い方
2 wrapAllメソッドの使い方
3 wrapInnerメソッドの使い方
4 要素追加の関連記事

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>