我该如何使用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；如果您提供了纯DOM答案以及jQuery答案，则会获得额外加分。
innerHTML。doFoo.onclick = () => {
const myNode = document.getElementById("foo");
myNode.innerHTML = '';
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>textContent.textContent。根据MDN的说明，这将比innerHTML更快，因为浏览器不会调用它们的HTML解析器，而是立即用单个#text节点替换元素的所有子级。doFoo.onclick = () => {
const myNode = document.getElementById("foo");
myNode.textContent = '';
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>lastChild：firstChild，但是更新为使用lastChild，因为在计算机科学中，通常从集合中删除最后一个元素比删除第一个元素快得多（具体取决于集合的实现方式）。firstChild，以防万一它比lastChild更快（例如，如果UA将元素列表实现为定向链表）。doFoo.onclick = () => {
const myNode = document.getElementById("foo");
while (myNode.firstChild) {
myNode.removeChild(myNode.lastChild);
}
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>lastElementChild：Element类型的子节点（即#text文本节点和<!-- comments -->注释节点），但不包括它们的后代节点，这在应用程序中可能是可取的（例如某些使用内联HTML注释存储模板指令的模板系统）。lastElementChild的支持。doFoo.onclick = () => {
const myNode = document.getElementById("foo");
while (myNode.lastElementChild) {
myNode.removeChild(myNode.lastElementChild);
}
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<!-- This comment won't be removed -->
<span>Hello <!-- This comment WILL be removed --></span>
<!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>Element.clearChildren 猴子补丁:Element原型中，以简化调用它为只需使用el.clearChildren()（其中el是任何HTML元素对象）。if( typeof Element.prototype.clearChildren === 'undefined' ) {
Object.defineProperty(Element.prototype, 'clearChildren', {
configurable: true,
enumerable: false,
value: function() {
while(this.firstChild) this.removeChild(this.lastChild);
}
});
}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
<span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>replaceChildren() API！现在可以使用跨浏览器支持的replaceChildren API来替换所有子元素：
container.replaceChildren(...arrayOfNewChildren);
这将同时完成以下两个操作：
你也可以使用同样的API只移除已存在的子元素而不替换它们：
container.replaceChildren();
这个功能在Chrome/Edge 86+、Firefox 78+和Safari 14+中得到充分支持。它是完全指定的行为。此方法可能比此处提出的任何其他方法更快，因为它不需要使用innerHTML进行旧子元素的删除和新子元素的添加，并且只需一步即可完成操作。
remove！const parent = document.getElementById("foo")
while (parent.firstChild) {
parent.firstChild.remove()
}
这是在 ES5 中写节点删除的一种更新方法。它是原生 JS，并且比依赖父节点更好阅读。
所有现代浏览器都支持。
浏览器支持 - 97％ 2021年6月
while(parent.firstChild){ parent.removeChild(parent.firstChild); }循环。 - qixwhile (parent.firstChild && !parent.firstChild.remove()); - Gibolt[...parent.childNodes].forEach(el => el.remove());，该代码可从父元素中移除所有子元素。 - user993683while (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); } 代替。 - John Henckel目前普遍接受的答案关于 innerHTML 比较慢是错误的（至少在IE和Chrome中），正如m93a所正确提到的。
使用这种方法（会破坏已附加的 jQuery 数据），Chrome 和 FF 的速度大大提高：
var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);
在Firefox和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();
其他提到的方法似乎可以相互比较，但是除了jquery（1.1.1和3.1.1）之外都比innerHTML慢得多，而jquery则明显比其他任何东西都要慢：
$(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" 经常被理解为 "per-iteration"，只有第一次迭代有要删除的节点，因此结果是没有意义的，在发布时，在此线程中存在设置不正确的测试。
jQuery.cache中的数据变为孤立状态，从而导致内存泄漏，因为管理该数据的唯一引用是您刚刚销毁的元素。" - user1106925.clear()或者.empty()的DOM方法… - Scott Means$('#foo').empty();
如果你不：
var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
var myNode = document.getElementById("foo");
var fc = myNode.firstChild;
while( fc ) {
myNode.removeChild( fc );
fc = myNode.firstChild;
}
$('#foo').empty();
jQuery的.empty()方法将确保清除与被移除元素相关联的任何数据。
如果您仅使用DOM方法删除子元素，则该数据将保留。
while ( myNode.firstChild ) { - Victor Zamanianwhile(fc = myNode.firstChild){ myNode.removeChild(fc); } - Valen使用elm.replaceChildren()。
它是试验性的，支持并不广泛，但在没有参数的情况下执行将完成您要求的操作，并且比循环遍历每个子元素并删除它更有效。如前所述，用空字符串替换innerHTML会在浏览器端进行HTML解析。
更新现在已得到广泛支持
最快的...
var removeChilds = function (node) {
var last;
while (last = node.lastChild) node.removeChild(last);
};
如果你只想要节点本身而不包含它的子元素，你也可以像这样复制它：
var dupNode = document.getElementById("foo").cloneNode(false);
取决于您试图实现什么目标。
parent.replaceChild(cloned, original)？这样做可能比一个个删除子节点更快，并且适用于支持DOM的所有文档类型（包括SVG在内的XML文档）。使用innerHTML设置可能比一个个删除子节点更快，但是这只适用于HTML文档。应该有时间测试一下。 - MaartenaddEventListener 添加的事件监听器不会被复制。 - MatthewmyNode.querySelectorAll('*').forEach( n => n.remove() );
这回答了这个问题，并且移除了“所有子节点”。
如果myNode中有文本节点，它们无法使用CSS选择器进行选择，在这种情况下，我们还需要应用（也）：
myNode.textContent = '';
实际上，最后一个可能是最快和更有效/高效的解决方案。
.textContent 比 .innerText 和 .innerHTML 更高效，参见：MDN
innerHTML = ''会更慢，但我不认为这是“错误”的。任何关于内存泄漏的说法都应该有证据支持。 - Chris Middleton