jQueryでの要素の作成とラッピング
タグでラッピングする前に、ドキュメント内に要素を事前に作成することができます。
以下の段落を '<div></div>' タグでラップしてみましょう:
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
これを行うには、事前に
document.createElement('div')
を使用してドキュメント内に要素を作成できます:
$('.www').wrap(document.createElement('div'));
または:
let div = document.createElement("div");
$('.www').wrap(div);
パラメータとして渡せるのはタグ名だけでなく、
'<div></div>' のような構造も可能です
- この場合、効果は全く同じになります:
$('.www').wrap('<div></div>');
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でラップしてみましょう:
$('.www').wrap('<div class="zzz"></div>');
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>
各 h3 をクラス aaa の
div でラップしてください。