用 jQuery 对象替换答案

【问题标题】：replaceWith with jQuery Objects用 jQuery 对象替换
【发布时间】：2014-01-04 03:45:50
【问题描述】：

我有这个：

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

“obj”不会被新的 HTML 替换。

这里是演示： http://jsfiddle.net/v7EA2/

也许我不明白 replaceWith() 函数的工作原理，

感谢您的帮助。

更新

【问题讨论】：

如果你想用另一个替换 DOM 中的元素，你必须先选择它，然后调用 .replaceWith() 。在您的示例中，您正在创建一个在 DOM 中不存在的新元素。准确解释您要做什么。
请告诉我们预期的结果！
我正在尝试在将元素插入 DOM 之前替换它。

【解决方案1】：

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

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

详情：

我将总结此答案下方的 cmets 中详细介绍的研究。感谢 PSL、calberts、Jason P 和 A. Wolff。

documentation of replaceWith 声明如下：

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

$( "<div/>" ).replaceWith("<p></p>" );
这意味着 OP 提供的示例确实应该有效。 And it works till version 1.8。不幸的是，from version 1.9 it stops working。这似乎是一个错误，只有在您尝试替换 jQuery 对象的“根元素”时才会发生。
其实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 中:)。

【讨论】：

但是看到这个：jsfiddle.net/v7EA2/6 如果我尝试在元素中选择一些东西，它会起作用！！
$( "<div/>" ).replaceWith( "<p></p>" ); 应该返回一个 p 标签，但它没有
@:kapa 但是看看@callbertts 提供的示例，它可以工作，但不能在根节点上工作。所以考虑到文档，这似乎是一个错误。
@PSL 文档中的这两个语句似乎是矛盾的：“.replaceWith() 方法，像大多数 jQuery 方法一样，返回 jQuery 对象，以便其他方法可以链接到它。但是，需要注意的是返回的是原来的jQuery对象。这个对象是指已经从DOM中移除的元素，而不是已经替换它的新元素。"和"从jQuery 1.4开始, .replaceWith() 也可以在断开连接的 DOM 节点上工作。例如，使用以下代码，.replaceWith() 返回一个仅包含一个段落的 jQuery 集。:" $( "<div/>" ).replaceWith( "<p></p>" );
@JasonP 是的，看起来像... :) 即使他们提供的示例也不起作用。

【解决方案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>');

【讨论】：

【解决方案3】：

您可以通过以下代码将replace 之前的appending 变成dom，

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

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

DEMO

【讨论】：