title: Replace element contents with document fragment javascript
body: <p>I'm trying to replace all contents of an element with a document fragment:</p>
  
  <p><code>var frag = document.createDocumentFragment()</code></p>
  
  <p>The document fragment is being created just fine. No problems there. I add elements to it just fine, no problems there either. I can append it using <code>element.appendChild(frag)</code>. That works just fine too.</p>
  
  <p>I'm trying to create a "replace" method similar to jQuery's HTML. I'm not worried about old-browser compatibility. Is there a magical function to replace all content of an element? </p>
  
  <p>I have tried <code>element.innerHTML = frag.cloneNode(true)</code>, (as per <em>every</em> 'replace element content' wiki I could find), that doesn't work. It gives me <code>&lt;div&gt;[object DocumentFragment]&lt;/div&gt;</code>.</p>
  
  <p>No libraries, please, not even a jQuery solution.</p>
  
  <p>For clarity, I'm looking for a "magic" solution, I know how to remove all the existing elements one at a time and then append my fragment. </p>