jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースがあった。jQueryのbefore / afterで無理やり囲めばいいのかと思いきやうまく動かない。調べたところそれ用のメソッドが用意されていたので使い方のメモ。

やりたいこと

以下の#span_1 / #span_2を<div id="test">というタグで囲みたい。

<div id="div_1">
    <span id="span_1">span_1</span>
    <span id="span_2">span_2</span>
</div>

<div id="div_2">
    <span id="span_3">span_3</span>
    <span id="span_4">span_4</span>
</div>

ダメなパターン

$('#span_1').before('<div id="test">');
$('#span_2').after('</div>');

無理やり感はあるもののこれで行けるかと思いきや以下のような出力となった。

<div id="div_1">
    <div id="test"></div>
    <span id="span_1">span_1</span>
    <span id="span_2">span_2</span>
</div>

<div id="div_2">
    <span id="span_3">span_3</span>
    <span id="span_4">span_4</span>
</div>

正しい方法

$('#span_1, #span_2').wrapAll('<div id="test"></div>');

リファレンスは以下になる。

http://semooh.jp/jquery/api/manipulation/wrapAll/html/