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

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/