用jQuery对象替换

replaceWith with jQuery Objects

本文关键字：替换 对象 jQuery      更新时间：2023-09-26

我试图将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/

发生这种情况是因为您的元素没有父元素。将它附加到DOM或另一个jQuery集合中，它就可以工作了。

我创建了一个小演示，可能有助于理解这种方法的作用。

详细信息：

我将在下面的回答中总结详细的研究。感谢PSL、calberts、Jason P和A.Wolff。

  1. replaceWith的文件说明如下：

    从jQuery 1.4开始，.replaceWith（）也可以处理断开连接的DOM节点。例如，对于以下代码，.replaceWith（）返回只包含一段的jQuery集。：

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

  2. 这意味着OP提供的示例确实应该起作用。它一直工作到1.8版本。不幸的是，从1.9版本开始，它就停止工作了。这似乎是一个错误，只有当您试图替换jQuery对象的"根元素"时才会发生。

  3. 事实上，1.9中的变化是有记录的：

    在1.9之前，.fafter（）、.foref（）和.replaceWith（）将尝试如果集合未连接到文档，在这些情况下返回一个新的jQuery集合而不是原始集合。这创造了几个不一致和彻底的错误——该方法可能会也可能不会根据其参数返回一个新结果！截至1.9方法总是返回原始的未修改集，并尝试在没有父级的节点上使用.fafter（）、.foree（）或.replaceWith（）没有任何效果--也就是说，集或它包含的节点都不是已更改。

    问题是，这一变化从未出现在官方文件中。我发现了一个关于这个的bug，但它被关闭了，因为它属于另一个跟踪器。

快速解决方案：

在OP的情况下，"更换"元素的最简单方法是

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

但前提是它还不在DOM中：）。

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

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

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

您可以通过以下代码将replace之前的appending转换为dom，

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

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

演示

相关文章：