wrapInner(wrappingElement)

version 1.2 以降

解説

マッチした要素の子要素全体を、指定したHTMLで囲みます。

例1:div.test要素の子要素全体を、点線枠をもつp要素で囲みます。

// dot_borderクラス
.dot_border {border:2px dotted #ff8c00; margin:5px; padding:5px;}

$("div.test").wrapInner("<p class='dot_border'></p>");

div.test要素2
Google

div.test要素3
Ikemasa Blog

引数に渡すことができるのは、HTMLの「構造(structure)」です。
テキストを含む要素を指定した場合は、意図した通りに動作しません。

例）

○	<div class="className"></div>
×	<div class="className">あいうえお</div>

wrapInnerで囲む対象の要素は、マッチした要素の"子要素全体"です。各子要素ではありません。

例）

<div>
    <span>span要素１</span>
    <span>span要素２</span>
    <span>span要素３</span>
</div>

$("div").wrapInner("<b></b>");を実行

<div>
<b>
    <span>span要素１</span>
    <span>span要素２</span>
    <span>span要素３</span>
</b>
</div>