删除JavaScript中DOM节点的所有子元素

Question

删除JavaScript中DOM节点的所有子元素如何删除JavaScript中DOM节点的所有子元素？假设我有以下(丑陋的)HTML：<p id="foo">     <span>hello</span>     <div>world</div></p>我抓住了我想要的节点，就像这样：var myNode = document.getElementById("foo");我怎么才能把孩子们foo所以<p id="foo"></p>是左？我可以这么做吗？myNode.childNodes = new Array();或者我应该使用removeElement?我希望这个答案是直接的，DOM；不过，如果您还在jQuery中提供了一个答案，同时还提供了一个DOM唯一的答案，那么还需要额外的点。

Answer 1

备选案文1(慢得多，见下文评论)：

var myNode = document.getElementById("foo");myNode.innerHTML = '';

备选案文2(速度快得多)：

var myNode = document.getElementById("foo");while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);}

Answer 2

var myNode = document.getElementById("foo");var fc = myNode.firstChild;while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;}

---

如果您有可能受到jQuery影响的后代，那么您必使用一些方法来清理jQuery数据。

$('#foo').empty();

jQuery.empty()方法将确保任何与被删除元素相关的jQuery数据都将被清除。

如果你只是用DOM去除孩子的方法，这些数据将保留下来。