我正在尝试用文档片段替换元素的所有内容：
var frag = document.createDocumentFragment()
文档片段正在创建得很好。那里没有问题。我给它添加元素就好了，那里也没有问题。我可以使用element.appendChild(frag). 这也很好用。
我正在尝试创建一个类似于 jQuery 的 HTML 的“替换”方法。我不担心旧浏览器的兼容性。是否有一个神奇的功能可以替换元素的所有内容？
我已经尝试过element.innerHTML = frag.cloneNode(true)，（根据我能找到的每个“替换元素内容”wiki），这是行不通的。它给了我<div>[object DocumentFragment]</div>。
请不要使用库，甚至不要使用 jQuery 解决方案。
为了清楚起见，我正在寻找一种“神奇”的解决方案，我知道如何一次删除所有现有元素，然后附加我的片段。
你有没有尝试过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);
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)
编辑（因为我原来的答案很愚蠢）：
var rep = document.createElement("div");
rep.appendChild(frag);
element.innerHTML = rep.innerHTML;