如何在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专用的答案，会有额外的加分。
当前回答
innerText是赢家!http://jsperf.com/innerhtml-vs-removechild/133。在所有之前的测试中，父节点的内部dom在第一次迭代时被删除，然后innerHTML或removecchild应用于空div。
其他回答
最快的…
var removeChilds = function (node) {
var last;
while (last = node.lastChild) node.removeChild(last);
};
感谢Andrey Lushnikov提供的jsperf.com链接(很酷的网站!)
编辑:需要明确的是，在Chrome中，firstChild和lastChild之间没有性能差异。上面的答案显示了一个很好的性能解决方案。
这是一个纯粹的javascript，我不使用jQuery，但工作在所有浏览器甚至IE，这是非常简单的理解
<div id="my_div">
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
</div>
<button id ="my_button>Remove nodes ?</button>
document.getElementById("my_button").addEventListener("click",function(){
let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs
//Let find numbers of child inside the div then remove all
for(var i =0; i < parent_node.childNodes.length; i++) {
//To avoid a problem which may happen if there is no childNodes[i]
try{
if(parent_node.childNodes[i]){
parent_node.removeChild(parent_node.childNodes[i]);
}
}catch(e){
}
}
})
or you may simpli do this which is a quick way to do
document.getElementById("my_button").addEventListener("click",function(){
let parent_node =document.getElemetById("my_div");
parent_node.innerHTML ="";
})
Ecma6使它简单而紧凑
myNode.querySelectorAll('*').forEach( n => n.remove() );
这回答了问题，并删除了“所有子节点”。
如果有属于myNode的文本节点，它们不能被CSS选择器选中，在这种情况下，我们必须应用(also):
myNode.textContent = '';
实际上，最后一个可能是最快和更有效的解决方案。
.textContent比.innerText和.innerHTML更有效，参见:MDN
如果你想把一些东西放回那个div, innerHTML可能更好。
我的例子:
<ul><div id="result"></div></ul>
<script>
function displayHTML(result){
var movieLink = document.createElement("li");
var t = document.createTextNode(result.Title);
movieLink.appendChild(t);
outputDiv.appendChild(movieLink);
}
</script>
如果我使用. firstchild或. lastchild方法，displayHTML()函数之后不会工作，但使用. innerhtml方法没有问题。
使用elm.replaceChildren()。
它是实验性的，没有广泛的支持，但当不带参数执行时，它会做你所要求的，而且它比遍历每个子节点并删除它更有效。如前所述，用空字符串替换innerHTML将需要浏览器进行HTML解析。
MDN文档
它现在得到了广泛的支持
