在JavaScript中删除DOM节点的所有子元素
我将如何去除JavaScript中DOM节点的所有子元素？
假设我有以下（难看的）HTML：
<p id="foo">
<span>hello</span>
<div>world</div>
</p>
我抓住我想要的节点：
var myNode = document.getElementById("foo");
我怎样才能删除foo的孩子，这样只剩下<p id="foo"></p>了？
我可以这样做吗？
myNode.childNodes = new Array();
或者我应该使用removeElement某些组合？
我希望答案是直线上升的DOM; 不过如果你还在jQuery中提供了一个答案以及仅限DOM的答案，那还是多加点。
选项1（慢得多，见下面的评论）：
var myNode = document.getElementById("foo");
myNode.innerHTML = '';
选项2（更快）：
var myNode = document.getElementById("foo");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
目前接受的答案是错误的，因为m93a正确提到，innerHTML速度较慢（至少在IE和Chrome中）。
Chrome和FF使用这种方法会显着加快速度（这会破坏附加的jQuery数据）：
var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode ,node);
在FF和Chrome中遥遥领先，在IE中速度最快：
node.innerHTML = '';
InnerHTML 不会破坏你的事件处理程序或破坏jquery引用 ，它也被推荐为一个解决方案：https：//developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
最快的DOM操作方法（仍然比前两个更慢）是范围移除，但是直到IE9才支持范围。
var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();
其他提到的方法似乎是可比的，但比innerHTML慢得多，除了异常，jquery（1.1.1和3.1.1），这比其他任何方法都慢很多：
$(node).empty();
这里的证据：
http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript（jsperf重启后的新网址，因为编辑旧网址不起作用）
Jsperf的“per-test-loop”通常被理解为“每次迭代”，只有第一次迭代才会删除节点，所以结果没有意义，发布时此线程中的测试设置不正确。
var myNode = document.getElementById("foo");
var fc = myNode.firstChild;
while( fc ) {
myNode.removeChild( fc );
fc = myNode.firstChild;
}
如果有任何机会，你有jQuery受影响的后裔，那么你必须使用一些方法，将清理jQuery数据。
$('#foo').empty();
jQuery .empty()方法将确保jQuery与被删除的元素关联的任何数据都将被清除。
如果您只是使用DOM方法移除子项，那么这些数据将保留。