使用jQuery对象的replaceWith方法

Question

3

我正在尝试使用replaceWith(...)函数来替换jQuery对象，但它无法正常工作，当我尝试使用插入的DOM元素时它可以工作，但是对于jQuery对象却不行。

我有以下代码:

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

“obj”未被新的HTML替换。

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

也许我没有理解replaceWith()函数的工作原理，

感谢您的帮助。

更新

- calbertts

如果您想用另一个元素替换DOM中的元素，必须先选择它，然后调用.replaceWith()。在您的示例中，您正在创建一个在DOM中不存在的新元素。请解释您要做什么。 - pmandell

请告诉我们期望的结果！ - A. Wolff

我试图在插入到DOM之前替换一个元素。 - calbertts

3个回答

3

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

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

- patel.milanb

1

你可以使用以下代码在将其附加到dom之前替换它：

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

理论：首先你需要从初始的 jQuery 对象中排除 div，然后你需要将新的一组 HTML 添加到其中。

演示

- Rajaprabhu Aravindasamy

嗯，似乎在新版本的jQuery中replaceWith(...)函数存在一个bug，但是你的答案虽然不太优雅或直观，但现在对我很有效。谢谢！ - calbertts

1

也许我漏掉了什么，但这与使用“obj = $('<span>New text</span>')”简单更新变量有何不同？对我来说似乎有些过度。 - kapa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapa · Accepted Answer

由于您的元素没有父级，所以会出现这种情况。将其附加到DOM或另一个jQuery集合中即可解决。

我创建了一个小演示，可以帮助理解此方法的作用。

细节：

我将总结在本答案下面的评论中详细介绍的研究。感谢PSL、calberts、Jason P和A. Wolff。

replaceWith的文档中说明：

自 jQuery 1.4 开始，.replaceWith() 可以在未连接到 DOM 节点上工作。例如，使用以下代码，.replaceWith() 返回一个仅包含段落的 jQuery 集合:

$( "<div/>" ).replaceWith("<p></p>" );
这意味着 OP 提供的示例确实可以正常工作。并且在版本 1.8 之前都有效。不幸的是，从版本 1.9 开始就不再起作用了。这似乎是一个 bug，只有在尝试替换 jQuery 对象的 "根元素" 时才会发生。
实际上，1.9 中的更改已记录在案:

在 1.9 之前，如果集合中的第一个节点未连接到文档，则 .after()、.before() 和 .replaceWith() 将尝试添加或更改节点，并在这些情况下返回新的 jQuery 集合而不是原始集合。这创建了几个不一致和明显的 bug——方法可能会根据其参数返回新结果或旧结果！从 1.9 开始，这些方法始终返回原始未修改的集合，并在没有父级的节点上尝试使用 .after()、.before() 或 .replaceWith() 没有效果——即，既不更改集合也不更改其包含的节点。

问题在于更改从未出现在官方文档中。我发现有关此事的错误报告，但它被关闭，因为它属于另一个跟踪器。

快速解决方案：

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

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

但前提是它尚未在DOM中：)。