如何一次性删除 div 内的所有子节点，以便在使用 javascript 执行代码行后它是空的？

Question

我正在尝试在 javascript 中实现一段代码，它删除 div 中的所有子节点，这样在执行代码后它是空的。我正在考虑使用 while 循环和应用于此 div 的 hasChildNodes() 方法，并在循环的参数内插入一行代码，删除此 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>

如何一次性删除 div 内的所有子节点，以便在使用 javascript 执行代码行后它是空的？

How can I delete all Child Nodes inside a div in one shot in such a way it is empty after that code lines are executed using javascript?

javascript

html

child-nodes