从父元素中删除子元素的最佳方法？ [重复]

Question

这个问题在这里已有答案：

• 删除子节点（或元素）或设置innerHTML =“”？ 3个答案

我正在使用dinamically创建的JavaScript元素。 所有元素都附加到同一个div中，但有时我需要清空div并添加新元素。

在之前的项目中，我使用了一种方法，我将每个生成的元素的ID添加到一个数组中，当我不得不删除它们时，我运行以下算法：

for (var a = IDArray.length-1; a>=0; a--){
    var element = document.getElementById(IDArray[a]);
    element.parentNode.removeChild(element);
    IDArray.splice(a,1);
}

它工作得很好，但我开始思考：我追加 - 并从具有innerHTML值的div中删除。 所以我可以使用以下行清空div：

document.getElementById("parentDiv").innerHTML = "";

我试过了，他们都达到了同样的目的，至少看起来像它。

我的问题是：使用innerHTML方法会产生任何可能导致网站可用性问题的后果吗？ 或者它只是一种更短，更有效的方式来实现同样的事情？

Answer 1

关于此问题的讨论相当多。 例如： 在JavaScript中清空节点的最佳方法是什么 。

最快的方法，特别是在深层嵌套元素上，似乎是：

while(element.firstChild){
    element.removeChild(element.firstChild);
}

Answer 2

是的，将innerHTML设置为“”是删除元素的完美解决方案。 实际上，如果您保留对数组中旧元素的引用，则必须清理该数组以允许它们被垃圾回收。

当然，如果由于其他原因确实需要引用，请不要忘记在从DOM中删除元素时会删除这些引用（或包含它们的对象）。

不使用innerHTML清理孩子并不需要那些引用。 你可以逃脱：

while(parent.firstChild) parent.removeChild(parent.firstChild)

Answer 3

我想说第二个例子很好。

根据我的经验，非常新手JavaScript编码器过多地使用innerHTML。 但是，熟练的JavaScript编码人员可能不经常使用它。

一方面，它是一种简单的方便方法 - 您必须将其视为方法而非财产。 它不应该仅仅为单个节点添加单个节点而过度使用。

但是，如果您对元素的整个内容进行粗略的更改，并且创建/检索某些HTML表示非常容易，那么可以使用它; 请记住，它是用浏览器的本机代码（C ++）编写的，因此它可能比您组装的任何循环运行得更快。

为了避免使用ID，请记住，您可以使用“elem.children”检索元素的子元素，该元素返回类似数组（不是大写A数组）的结构。 如果您为所有元素提供共享类，也可以快速重新查找元素。 在我自己的项目中，如果我确定在整个文档中只有一个ID，我只给一个元素一个ID; 我从不以数字方式分配ID。

Answer 4

毫无疑问，有多种方法可以实现，但是如果您对子元素（包含元素引用的变量）的引用比您可以简单地执行：

myChildNode.parentNode.removeChild(myChildNode);

否则innerHtml也没有后果。