如何替换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 id="the-new-div-wrapper">的div中？

结果将成为：

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

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

似乎不起作用。

Answer 1

首先进行包装

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

或者分为两行：

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

Fiddle

你的代码中还有一个拼写错误：$targetDiv.replaceWith($newDiv).wrap('<div id="the-new-div-wrapper"' />')还有一个附加的撇号，不应该存在。

Answer 2

试试这个

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

它会在批次替换目标div之前实际包装div，但会实现相同的结果。

见这里

http://jsfiddle.net/WgW6Y/