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

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

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

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
即実践　手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者	村守康
学習時間	6時間
受講者数	28,547人
レビュー	(425件)

動画の詳細はこちら

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>