用jQuery对象替换

Question

我正在尝试将replaceWith（...）函数与jQuery对象一起使用，但它不起作用，当我尝试使用插入的DOM元素时它可以工作，但不能在jQuery对象中。

我有这个：

var obj = $('<div id="obj">Text</div>');
obj.replaceWith('<span>New text</span>');

“obj”未被新HTML替换。

以下是演示： http://jsfiddle.net/v7EA2/

也许我不明白replaceWith（）函数是如何工作的，

谢谢你的帮助。

---

更新

请看这里：http://jsfiddle.net/v7EA2/6/

Answer 1

这是因为您的元素没有父元素。将它附加到DOM或另一个jQuery集合，它将起作用。

我创建了一个little demo，可能有助于理解此方法的作用。

<强>详情：

我将总结本答案下面评论中详述的研究。感谢PSL，calberts，Jason P和A. Wolff。

1. documentation of replaceWith声明如下：

     

   从jQuery 1.4开始，.replaceWith（）也可以在断开连接的DOM上工作   节点。例如，使用以下代码，.replaceWith（）返回一个   jQuery集只包含一段：

        

   $( "<div/>" ).replaceWith("<p></p>" );

2. 这意味着OP提供的示例确实有效。 And it works till version 1.8。不幸的是，from version 1.9 it stops working。这似乎是一个错误，只有在您尝试替换jQuery对象的“根元素”时才会发生。

3. 实际上the change in 1.9 was documented：

     

   在1.9之前，。after（）,. before（）和.replaceWith（）会尝试   如果第一个节点在当前jQuery集中添加或更改节点   set没有连接到文档，在这些情况下返回一个新文档   jQuery设置而不是原始设置。这创造了几个   不一致和彻头彻尾的错误 - 方法可能会也可能不会   根据参数返回一个新结果！截至1.9，这些   方法总是返回原始的未修改集并尝试   在没有父节点的节点上使用.after（）,. before（）或.replaceWith（）   没有效果 - 也就是说，它所包含的集合或节点都不是   改变。

   问题在于改变从未进入官方文档。我发现a bug已发布此内容，但已关闭，因为它属于其他跟踪器。

---

快速解决方案：

在OP的情况下，“替换”元素的最简单方法是

var obj = $('<div id="obj">Text</div>');
obj = $('<span>New text</span>');

但仅当它还没有在DOM中时：）。

Answer 2

Jsfillde：http://jsfiddle.net/v7EA2/3/

首先使DOM可用，然后使用$.replaceWith

更改html

var obj = $('<div>Text</div>');
$('#result').text(obj[0].outerHTML);
$('#result').replaceWith('<span>Text</span>');

Answer 3

您可以replace之前appending通过以下代码进入dom，

  var obj = $('<div>Text</div>').not('div').add('<span>New text</span>');

理论：首先，您必须从初始div中排除Jquery object，然后您必须add将新的html集合放入其中。

DEMO