Web制作の現場で使えるjQuery　UIデザイン入門 ― 第5回

サンプルで学ぶjQuery：(X)HTML/CSSを操作する (4/7)

5．他の要素で包む

　指定した要素を追加するのではなく、特定の要素で包む（ラップする）こともできます。

■各要素を指定した要素で包む

　wrap() は、セレクターで指定した要素を、別の指定した要素で包む命令です。括弧内に、包みたいhtmlタグを空の状態で記述します。

▼サンプルコード（スクリプト部分）

$("strong").wrap("<h1></h1>");

　上記のサンプルを実行すると、strong要素がh1要素で包まれます。セレクターに複数の要素が含まれる場合は、それぞれの要素が個別に包まれます。

▼サンプルコード（元の(X)HTML部分）

<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>

▼実行結果（実際のWebページ）

<h1><strong>テキストテキスト</strong></h1>
<h1><strong>テキストテキスト</strong></h1>

■全要素を別の要素で包む

　指定した複数の要素を、まとめて別の要素で包みたい場合は、wrapAll() を利用します。wrapAll() も、包みたいhtmlタグを空の状態で記述します。

▼サンプルコード（スクリプト部分）

$("strong").wrapAll("<h1></h1>");

　上記のサンプルでは、すべてのstrong要素をまとめてh1要素で包む形に変更します。

▼サンプルコード（元の(X)HTML部分）

<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>

▼実行結果（実際のWebページ）

<h1>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</h1>

　wrapAll() は、セレクターで指定した要素が複数ある場合、要素の間に含まれる別の要素やテキストを除外します。たとえば以下の(X)HTMLでは、1つ目のstrong要素と2つ目のstrong要素の間にあるテキストが追い出され、strong要素だけがh1要素で包まれます。

▼サンプルコード（元の(X)HTML部分）

<strong>テキストテキスト</strong>
テキストテキスト
<strong>テキストテキスト</strong>

▼実行結果

<h1>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</h1>
テキストテキスト

■指定した要素の子要素を別の要素で包む

　指定した要素の子要素やテキストを別の要素で包みたい場合は、wrapInner() を利用します。wrapInner() も、包みたいhtmlタグを空の状態で記述します。

▼サンプルコード（スクリプト部分）

$("p").wrapInner("<strong></strong>");

　上記のサンプルでは、p要素の中身のテキストをstrong要素で包むように変更しています。

▼サンプルコード（元の(X)HTML部分）

<p>テキストテキスト</p>
<p>テキストテキスト</p>

▼実行結果（実際のWebページ）

<p><strong>テキストテキスト</strong></p>
<p><strong>テキストテキスト</strong></p>

6．要素の置き換え

　指定した要素を他の要素に置き換えることもできます。要素の置き換えは、replaceWith() を利用します。replaceWith() は、括弧内に置き換え後の(X)HTMLを記述します。

▼サンプルコード（スクリプト部分）

$("p").replaceWith("<h1>置き換え後</h1>");

　上記のサンプルを実行すると、p要素を「<h1>置き換え後</h1>」に置き換えて表示します。

▼サンプルコード（元の(X)HTML部分）

<p>置き換え前</p>

▼実行結果（実際のWebページ）

<h1>置き換え後</h1>

7．要素の削除

　指定した要素を削除できます。削除には remove() を使います。

▼サンプルコード（スクリプト部分）

$("p strong").remove();

　上記のサンプルを実行すると、p要素に含まれるstrong要素を削除します。

▼サンプルコード（元の(X)HTML部分）

<p><strong>削除する要素</strong>テキストテキストテキスト</p>

▼実行結果（実際のWebページ）

<p>テキストテキストテキスト</p>