javascript 用文档片段javascript替换元素内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13310740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace element contents with document fragment javascript
提问by Randy Hall
I'm trying to replace all contents of an element with a document fragment:
我正在尝试用文档片段替换元素的所有内容：
var frag = document.createDocumentFragment()
var frag = document.createDocumentFragment()
The document fragment is being created just fine. No problems there. I add elements to it just fine, no problems there either. I can append it using element.appendChild(frag). That works just fine too.
正在创建文档片段就好了。没有问题。我向它添加元素就好了，那里也没有问题。我可以使用element.appendChild(frag). 这也很好用。
I'm trying to create a "replace" method similar to jQuery's HTML. I'm not worried about old-browser compatibility. Is there a magical function to replace all content of an element?
我正在尝试创建一个类似于 jQuery 的 HTML 的“替换”方法。我不担心旧浏览器的兼容性。有没有神奇的功能来替换元素的所有内容？
I have tried element.innerHTML = frag.cloneNode(true), (as per every'replace element content' wiki I could find), that doesn't work. It gives me <div>[object DocumentFragment]</div>.
我试过element.innerHTML = frag.cloneNode(true)，（根据我能找到的每个“替换元素内容”维基），这不起作用。它给了我<div>[object DocumentFragment]</div>。
No libraries, please, not even a jQuery solution.
没有库，请，甚至没有 jQuery 解决方案。
For clarity, I'm looking for a "magic" solution, I know how to remove all the existing elements one at a time and then append my fragment.
为清楚起见，我正在寻找一种“神奇”的解决方案，我知道如何一次删除所有现有元素，然后附加我的片段。
回答by Thomas Jones
Have you tried replaceChild
你有没有尝试过 replaceChild
something like this
像这样的东西
element.parentNode.replaceChild(frag, element)
source: https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild
来源：https: //developer.mozilla.org/en-US/docs/DOM/Node.replaceChild
original jsFiddle: http://jsfiddle.net/tomprogramming/RxFZA/
原始 jsFiddle：http: //jsfiddle.net/tomprogramming/RxFZA/
EDIT: ahh, I didn't see replace contents. Well, just remove them first!
编辑：啊，我没有看到替换内容。好吧，只需先删除它们！
element.innerHTML = "";
element.appendChild(frag);
jsfiddle: http://jsfiddle.net/tomprogramming/RxFZA/1/
jsfiddle：http: //jsfiddle.net/tomprogramming/RxFZA/1/
note that in the jsfiddle, I only use jquery to hook up the button, the entirety of the click handler is raw javascript.
请注意，在 jsfiddle 中，我只使用 jquery 来连接按钮，整个点击处理程序都是原始 javascript。
Edit2: also suggested by pimvdb, but just append the new stuff to a detached element and replace.
Edit2：也由 pimvdb 建议，但只需将新内容附加到分离的元素并替换。
var newElement = element.cloneNode();
newElement.innerHTML = "";
newElement.appendChild(frag);
element.parentNode.replaceChild(newElement, element);
回答by pery mimon
2017:
Try this Magic answer from ContentEditable field and Range
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)
回答by Randy Hall
EDIT(cause my original answer was just plain dumb):
编辑（因为我原来的答案是愚蠢的）：
var rep = document.createElement("div");
rep.appendChild(frag);
element.innerHTML = rep.innerHTML;
