Question

我正在尝试用不同的元素替换组的根节点，但replaceWith似乎不起作用。

div = $('<div></div>'); 
div.replaceWith('<span></span>');  // returns [<span></span>]
console.log(div);  // [<div></div>]

div = $('<div><span></span></div>');
div.replaceWith('<a></a>');  // returns [<div><span></span></div>]
console.log(div);  // [<div><span></span></div>]

div不会被替换，返回的值总是自身而不是被替换的节点（div）。这似乎是从返回被替换元素的正常（文档化）实现中退回的。

div = $('<div><span></span></div>');
div.find('span').replaceWith('<a></a>');  // returns [<span></span>]
console.log(div);  // [<div><a></a></div>]

那么，如果replaceWith不起作用，我怎样才能用另一个元素替换根节点？

Answer 1

一种可能的方法是首先创建替换元素，然后将原始元素的内容附加到其中。像这样：

var orig = $('<div>dasdasd<span>dasdas</span>dasdeasd</div>');
var repl = $('<span></span>');
repl.append(orig.contents());

至于你所描述的replaceWith的行为，这实际上是故意的。引用docs：

在jQuery 1.9之前，如果集合中的第一个节点没有连接到文档，.replaceWith()会尝试添加或更改当前jQuery集中的节点，并且在这些情况下返回一个新的jQuery集而不是原来的一套。该方法可能会也可能不会返回新结果，具体取决于其参数的数量或连接性！

从jQuery 1.9开始，.after()，.before()和.replaceWith()始终如此   返回原始未修改的集合。 尝试使用这些方法   没有父节点的节点没有效果 - 也就是说，既不是集合也不是   它包含的节点已更改。

Answer 2

我相信这是因为它不知道您要替换的<div><span></span></div>结构的哪个部分。你可能需要做

div.find('div').replaceWith('<a></a>');

jQuery如何用不同的元素替换根节点

2 个答案: