title: Document fragment vs `div` container
body: <p>I've searched through stackoverflow questions and found few questions about the same topic, but none of them has an extensive answer I'm looking for. Most answers are focused around performance, but I'm looking for other differences as well.  Basically, <a href="https://stackoverflow.com/questions/14203196/does-using-a-document-fragment-really-improve-performance">this one</a> sums up the question succinctly:</p>
  
  <blockquote>
    <p>if I create an element (a  for example) in a variable but DO NOT
    APPEND IT TO THE DOM, add elements (divs, tables, etc ) and stuff and
    after all the work has been done (loops, validations, styling of
    elements), that element is appended, is it the same as a fragment?</p>
  </blockquote>
  
  <p>I've decided to give it a shot once again and see if anyone can give a good answer.</p>
  
  <p>So, why would I want to use this:</p>
  
  <pre><code>var fragment = document.createDocumentFragment();
  var divContainer = document.createElement("div");
  var divHeader = document.createElement("div");
  divContainer.appendChild( divHeader );
  fragment.appendChild( divContainer );
  document.getElementById("someElement").appendChild( fragment.cloneNode(true) );
  </code></pre>
  
  <p>instead of this:</p>
  
  <pre><code>var divContainer = document.createElement("div");
  var divHeader = document.createElement("div");
  divContainer.appendChild( divHeader );
  document.getElementById("someElement").appendChild( divContainer );
  </code></pre>