Question

我正在使用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

关于此问题的讨论相当多。例如：What is the best way to empty an node in JavaScript。

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

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

Answer 2

是的，将innerHTML设置为＆＃34;＆＃34;删除元素是一个非常好的解决方案。实际上，如果您保留对数组中旧元素的引用，则必须清理该数组以允许它们进行垃圾回收。

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

不使用innerHTML清理孩子并不真正需要这些参考。你可以逃脱：

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

Answer 3

我说第二个例子很好。

根据我的经验，非常新手的JavaScript程序员使用innerHTML太多了。但是，熟练的JavaScript编码员可能不经常使用它。

一方面，它是一种简单的方便方法 - 您必须将其视为方法而非财产。它不应该被过度使用，只需将单个节点添加到元素中即可。

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

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

Answer 4

毫无疑问，有多种方法可以做到这一点，但是如果您对子元素（包含元素引用的变量）的引用比您可以做的更多：

myChildNode.parentNode.removeChild(myChildNode);

否则 innerHtml 也没有后果。

从父元素中删除子元素的最佳方法？

4 个答案: