javascript - 在JavaScript中删除DOM节点的所有子元素(Remove all child elements of a DOM node in JavaScript)

Question

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

(我将如何删除JavaScript中DOM节点的所有子元素？)

Say I have the following (ugly) HTML:

(说我有以下（丑陋的）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?

(我怎样才能删除foo的子代，只剩下<p id="foo"></p> ？)

Could I just do:

(我可以做：)

myNode.childNodes = new Array();

or should I be using some combination of removeElement ?

(还是应该使用removeElement某种组合？)

I'd like the answer to be straight up DOM;

(我希望答案直接是DOM；)

though extra points if you also provide an answer in jQuery along with the DOM-only answer.

(如果您还提供jQuery答案以及仅DOM答案，则需要加分。)

  ask by Polaris878 translate from so

Answer 1

Option 1 (much slower, see comments below):

(选项1（慢得多，请参阅下面的评论）：)

 doFoo.onclick = () => { const myNode = document.getElementById("foo"); myNode.innerHTML = ''; } 

 <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span> </div> <button id='doFoo'>Remove Via innerHTML</button> 

Option 2 (much faster):

(选项2（快得多）：)

 doFoo.onclick = () => { const myNode = document.getElementById("foo"); while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } } 

 <div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span> </div> <button id='doFoo'>Remove Via removeChild</button>