用文档片段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连接按钮，整个点击处理程序是RAW 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：
尝试可满足的字段和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

edit （因为我的原始答案只是简单的哑巴）：

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