title: Remove all child elements of a DOM node in JavaScript
body: <p>How would I go about removing all of the child elements of a DOM node in JavaScript?</p>
  
  <p>Say I have the following (ugly) HTML:</p>
  
  <pre><code>&lt;p id="foo"&gt;
      &lt;span&gt;hello&lt;/span&gt;
      &lt;div&gt;world&lt;/div&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>And I grab the node I want like so:</p>
  
  <pre><code>var myNode = document.getElementById("foo");
  </code></pre>
  
  <p>How could I remove the children of <code>foo</code> so that just <code>&lt;p id="foo"&gt;&lt;/p&gt;</code> is left?</p>
  
  <p>Could I just do:</p>
  
  <pre><code>myNode.childNodes = new Array();
  </code></pre>
  
  <p>or should I be using some combination of <code>removeElement</code>?</p>
  
  <p>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.</p>