Question

我正在尝试用文档片段替换元素的所有内容：

var frag = document.createDocumentFragment()

正在创建文档片段。没有问题。我添加元素就好了，也没有问题。我可以使用element.appendChild(frag)附加它。这也很好。

我正在尝试创建一个类似于jQuery HTML的“替换”方法。我并不担心旧的浏览器兼容性。是否有一个神奇的功能来替换元素的所有内容？

我已经尝试element.innerHTML = frag.cloneNode(true)，（根据每个'替换元素内容'我可以找到的wiki），这不起作用。它给了我<div>[object DocumentFragment]</div>。

请不要图书馆。这意味着如果你把一个jQuery解决方案作为答案，你就会被投票。不要试图成为一个混蛋，但它发生每个时间。

谢谢！

修改为清楚起见，我正在寻找一个“神奇”的解决方案，我知道如何一次删除所有现有元素，然后附加我的片段。

Answer 1

您是否尝试过replaceChild

类似这样的事情

element.parentNode.replaceChild(frag, element)

来源：https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild

原始jsFiddle：http://jsfiddle.net/tomprogramming/RxFZA/

编辑：啊，我没有看到替换内容。好吧，先把它们删掉！

element.innerHTML = "";
element.appendChild(frag);

jsfiddle：http://jsfiddle.net/tomprogramming/RxFZA/1/

请注意，在jsfiddle中，我只使用jquery来挂钩按钮，整个点击处理程序都是原始的javascript。

Edit2：pimvdb也建议，但只需将新内容附加到分离元素并替换。

var newElement = element.cloneNode();
newElement.innerHTML = "";
newElement.appendChild(frag);
element.parentNode.replaceChild(newElement, element);

http://jsfiddle.net/tomprogramming/RxFZA/3/

Answer 2

从2017年开始，从ContentEditable字段和Range

尝试此魔术答案

var range = document.createRange(); // create range selection 
range.selectNodeContents($element); // select all content of the node
Range.deleteContents() // maybe there is replace command but i'm not find it
Range.insertNode(frag)

Answer 3

编辑（因为我原来的答案很简单）：

var rep = document.createElement("div");
rep.appendChild(frag);
element.innerHTML = rep.innerHTML;

用文档片段javascript替换元素内容

3 个答案: