删除JavaScript中DOM节点的所有子元素 [英] Remove all child elements of a DOM node in JavaScript

问题描述

说我有如下（丑陋的）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唯一的答案，那么你可以获得额外的分数。

解决方案

  var myNode = document.getElementById（foo）; 
 myNode.innerHTML =''; 
  

选项2（快得多）：

  var myNode = document.getElementById（foo）; 
 while（myNode.firstChild）{
 myNode.removeChild（myNode.firstChild）; 
} 
  

How would I go about removing all of the child elements of a DOM node in JavaScript?

Say I have the following (ugly) HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

And I grab the node I want like so:

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

How could I remove the children of foo so that just <p id="foo"></p> is left?

Could I just do:

myNode.childNodes = new Array();

or should I be using some combination of removeElement?

I'd like the answer to be straight up DOM; though extra points if you also provide an answer in jQuery along with the DOM-only answer.

解决方案

Option 1 (much slower, see comments below):

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

Option 2 (much faster):

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

这篇关于删除JavaScript中DOM节点的所有子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！