jQueryでの要素の作成とラッピング

タグでラッピングする前に、ドキュメント内に要素を事前に作成することができます。 以下の段落を '<div></div>' タグでラップしてみましょう：

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

これを行うには、事前に document.createElement('div') を使用してドキュメント内に要素を作成できます：

javascript$('.www').wrap(document.createElement('div'));

または：

javascriptlet div = document.createElement("div");
$('.www').wrap(div);

パラメータとして渡せるのはタグ名だけでなく、 '<div></div>' のような構造も可能です - この場合、効果は全く同じになります：

javascript$('.www').wrap('<div></div>');

HTMLコードは次のようになります：

html<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>

2番目の方法を使用する場合、開始タグ （この場合は '<div>'） には任意の属性を記述でき、ラッピングはそれらの属性と共に行われます。

段落をクラス zzz のdivでラップしてみましょう：

javascript$('.www').wrap('<div class="zzz"></div>');

HTMLコードは次のようになります：

html<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<p>text</p>