title: Native way to copy all child nodes to an other element
body: <p>I have to change "unknown" contents of XML. The structure and content itself is valid. 
  Original  </p>
  
  <pre><code>&lt;blabla foo="bar"&gt;
      &lt;aa&gt;asas&lt;/aa&gt;
      &lt;ff&gt;
      &lt;cc&gt;
              &lt;dd /&gt;
      &lt;/cc&gt;
      &lt;/ff&gt;
      &lt;gg attr2="2"&gt;
      &lt;/gg&gt;
      ...
      ...
  &lt;/blabla&gt;
  </code></pre>
  
  <p>becomes</p>
  
  <pre><code>&lt;blabla foo="bar"&gt;
      &lt;magic&gt;
          &lt;aa&gt;asas&lt;/aa&gt;
          &lt;ff&gt;
          &lt;cc&gt;
              &lt;dd /&gt;
          &lt;/cc&gt;
          &lt;/ff&gt;
          &lt;gg attr2="2"&gt;
          &lt;/gg&gt;
          ...
          ...
      &lt;/magic&gt;
  &lt;/blabla&gt;
  </code></pre>
  
  <p>thus, adding a child straight under document root node (document.documentElement) and "pushing" the "original" children under that.
  Here it has to be done in plain javascript (ecmascript).</p>
  
  <p>The idea now is to</p>
  
  <pre><code>// Get the root node
  RootNode = mymagicdoc.documentElement;
  
  // Create new magic element (that will contain contents of original root node)
  var magicContainer = mymagicdoc.createElement("magic");
  
  // Copy all root node children (and their sub tree - deep copy) to magic node
  /* ????? here
      RootNodeClone = RootNode.cloneNode(true);
      RootNodeClone.childNodes......
  */
  
  // Remove all children from root node
  while(RootNode.hasChildNodes()) RootNode.removeChild(RootNode.firstChild);
  
  // Now when root node is empty add the magicContainer
  // node in it that contains all the children of original root node
  RootNode.appendChild(magicContainer);
  </code></pre>
  
  <p>How to do that /* */ step? Or maybe someone has a much better solution in general for achieving the desirable result?<br>
  Thank you in advance!</p>
  
  <p>Answer:
  The solution by maerics works perfectly.</p>