如何在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专用的答案，会有额外的加分。
当前回答
使用现代Javascript，与删除!
const parent = document.getElementById("foo")
while (parent.firstChild) {
parent.firstChild.remove()
}
这是在ES5中编写节点删除的一种较新的方法。它是香草的JS，读起来比依赖父母要好得多。
支持所有现代浏览器。
浏览器支持- 97% 21年6月
其他回答
使用elm.replaceChildren()。
它是实验性的，没有广泛的支持，但当不带参数执行时，它会做你所要求的，而且它比遍历每个子节点并删除它更有效。如前所述，用空字符串替换innerHTML将需要浏览器进行HTML解析。
MDN文档
它现在得到了广泛的支持
简单快速使用for循环!!
var myNode = document.getElementById("foo");
for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
myNode.removeChild(myNode.childNodes[i]);
}
这将在<span>标签不起作用!
let el = document.querySelector('#el');
if (el.hasChildNodes()) {
el.childNodes.forEach(child => el.removeChild(child));
}
如果你使用jQuery:
$('#foo').empty();
如果你没有:
var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
element.textContent = '';
它像innerText，除了标准。它比removecchild()稍微慢一点，但更容易使用，如果没有太多东西需要删除，则不会有太大的性能差异。
