javascript - 如何在使用 javascript 执行代码行后一次性删除 div 中的所有子节点，以使其为空？

Question

我正在尝试在 javascript 中实现一段代码，它会删除 div 内的所有子节点，这样在执行代码后它是空的。我正在考虑使用while循环和hasChildNodes()应用于此 div 的方法，并在循环的参数内插入一行代码，在每次检查中删除此 div 的第一个子节点，直到它删除所有子节点，但我找到了相当麻烦。有没有更快的方法来使用某种方法摆脱 div 中的所有元素？

Answer 1

Jquery 的 $.html() 方法。

像这样：

$('#parent').html('');

里面的所有子元素都将替换为''；

或者

$('div').children().each(function(index){
    $(this).remove();
});

Answer 2

如果您不使用任何库（如 jQuery、dojo 或使用 SVG 或子节点上的事件），则一种选择：

var node = document.getElementById("foo");
node.innerHTML = "";

如果您使用像 dojo 或 jQuery 这样的库，那么您将避免内存泄漏，因为从 javascript 中对子节点的引用不会被清除，因此 dom 节点永远不会被释放。

始终使用适当的库方法来清除 DOM，以便它可以释放事件注册、节点引用，例如 jQuery：api.jquery.com/empty

Answer 3

如果您打算清除带有子节点和文本的 div，您可以将其 innerHTML 设置为空文本。

var target = document.getElementById("target");
setTimeout(function() {
  target.innerHTML = "";
},3000);

The text below will disappear after three seconds.
<div id="target">
  Some text.
  <div>
    Some text inside a child node.
  </div>
</div>