删除所有子节点

Posted 2023-02-16

【中文标题】删除所有子节点

【英文标题】：Remove all child nodes

【发布时间】：2011-03-23 08:22:54

【问题描述】：

如何使用 Dojo 或纯 javascript 从<div id="test"></div> 中？

【问题讨论】：

Remove all the children DOM elements in div的可能重复

这可能也有帮助：***.com/questions/4401278/…

【参考方案1】：

虽然使用 el.innerhtml = "" 很诱人，而且通常这很有效，但更正确的方法是：

var el = document.getElementById('test');
while( el.hasChildNodes() )
    el.removeChild(el.lastChild);

这样做的原因是因为 IE 非常讨厌使用 innerHTML 进行表格操作（这在 MSDN 中的某处有记录）。

编辑：找到 MSDN 参考：http://msdn.microsoft.com/en-us/library/ms532998%28v=vs.85%29.aspx#TOM_Create

【讨论】：

我同意，稍微清理一下

【参考方案2】：

dojo.empty(node) 将从节点中删除所有子节点，同时保留节点。

dojo.destroy(node) 将从节点中删除所有子节点，然后从其父节点中删除该节点。

【讨论】：

AMD - 将 dojo/dom-construct 导入为 domConstruct，然后调用 domConstruct.empty(node) 和 domConstruct.destroy(node)。

【参考方案3】：

here 是你需要的：

dojo.empty("someId");

【参考方案4】：

document.getElementById('yourDivID').innerHTML="";

【讨论】：

然而，有潜在的危险。这不适用于 IE 中的表格

不，你不对，我已经用 IE 测试过能够从 Div 中删除所有子节点。

我怀疑你没有完全测试过这个。正如微软自己在MSDN 上的文档所报告的那样：“由于表格所需的特定结构，table 和 tr 对象的 innerText 和 innerHTML 属性是只读的。要插入行和单元格，请更改内容和表格的属性，或者调整表格元素的大小，你必须使用 DOM。" 换句话说，如果你不完全理解它，依赖el.innerHTML = "" 是很危险的。

从 Internet Explorer 9 开始，您可以使用 W3C DOM 属性 textContent 与所有主流浏览器一起使用

【参考方案5】：

您可以使用 W3C DOM 属性 textContent 作为 Microsoft 非标准 innerHTML/innerText 的替代品，它是 DOM3 的一部分，并且自第 9 版起受到包括 Internet Explorer 在内的所有主要浏览器的支持http://www.w3schools.com/jsref/prop_node_textcontent.asp

更新：innerHTML/innerText 现在是 HTML5 标准的一部分