jQueryを使って、指定した要素を囲む・親要素を創る

wrap—系は、指定したコンテンツを囲む。

wrap()

指定した要素を一つずつバラバラに指定した親要素として囲む。

$(‘p’).wrap(‘<div class=”sample1″ />’);

全ての<p>を

<p>あああ</p>
<p>いいい</p>
<p>ううう</p>

<div class=”sample1″><p>あああ</p></div>
<div class=”sample1″><p>いいい</p></div>
<div class=”sample1″><p>ううう</p></div>

wrapAll()

指定した要素をまとめて指定した親要素で囲む。

$(‘p’).wrap(‘<div class=”sample2″ />’);

全ての<p>を

<p>あああ</p>
<p>いいい</p>
<p>ううう</p>

<div class=”sample2″>
<p>あああ</p>
<p>いいい</p>
<p>ううう</p>
</div>

wrapInner()

指定した要素の中にタグを差し込んで、コンテンツを囲う。

$(‘p’).wrap(‘<span />’);

全ての<p>を

<p>あああ</p>
<p>いいい</p>
<p>ううう</p>

<p><span>あああ</span></p>
<p><span>いいい</span></p>
<p><span>ううう</span></p>