在使用javascript執行代碼行后，如何以一次刪除div中所有子節點的方式將其清空？

Question

我正在嘗試在javascript中實現一段代碼，該代碼以一種在執行代碼后為空的方式刪除div中的所有子節點。 我當時在考慮使用while循環並將hasChildNodes()方法應用於此div，然后在循環的參數內插入一行代碼，該代碼行將在每次檢查中刪除該div的第一個孩子，直到它刪除所有子Node，但我覺得這很麻煩。 是否有使用某種方法擺脫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>