删除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去除孩子的方法，这些数据将保留下来。