javascript - DOM ノードを置き換えてラップするにはどうすればよいですか?

Question

次のようなテキストエリアに置き換えるdivがあります。

var $targetDiv = $('#the-div');
var $newDiv = $('#the-new-div');

$targetDiv.replaceWith($newDiv);

どちらが変わります：

<div id="the-div"></div>

の中へ：

<div id="the-new-div"></div>

<div id="the-new-div"></div>という divをどのようにラップし<div id="the-new-div-wrapper">ますか?

したがって、結果は次のようになります。

<div id="the-new-div-wrapper">
<div id="the-new-div">
</div>
</div>

$targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />')

動作しないようです。

score 3 · Accepted Answer

最初にラッピングを行います

$targetDiv.wrap('<div id="the-new-div-wrapper" />').replaceWith($newDiv);

または、2 行で作成します。

$targetDiv.replaceWith($newDiv);
$newDiv.wrap('<div id="the-new-div-wrapper" />');

コードにもタイプミスがあります$targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />')。追加のアポストロフィがありますが、これはあるべきではありません。

score 2 · Accepted Answer

これを試して

$targetDiv.replaceWith($newDiv.wrap('<div id="the-new-div-wrapper"' />'));

実際には、ロットがターゲット div を置き換える前に div をラップしますが、同じ結果が得られます。

こちらをご覧ください

2 に答える 2