javascript - 如何替换 DOM 节点并在之后包装它？

Question

我有一个 div，我将其替换为 textarea，例如：

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);

或者分成两行：

$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