title: Should I use document.createDocumentFragment or document.createElement
body: <p>I was <a href="http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/" rel="noreferrer">reading about document fragments</a> and DOM reflow and wondered how <code>document.createDocumentFragment</code> differed from <code>document.createElement</code> as it looks like  neither of them exist in the DOM until I append them to a DOM element.</p>
  
  <p>I did a test (below) and all of them took exactly the same amount of time (about 95ms). At a guess this could possibly be due to there being no style applied to any of the elements, so no reflow maybe. </p>
  
  <p>Anyway, based on the example below, why should I use <code>createDocumentFragment</code> instead of <code>createElement</code> when inserting into the DOM and whats the differnce between the two.  </p>
  
  <pre><code>var htmz = "&lt;ul&gt;";
  for (var i = 0; i &lt; 2001; i++) {
      htmz += '&lt;li&gt;&lt;a href="#"&gt;link ' + i + '&lt;/a&gt;&lt;/li&gt;';
  }
  htmz += '&lt;ul&gt;';
  
  //createDocumentFragment
  console.time('first');
  var div = document.createElement("div");
  div.innerHTML = htmz;
  var fragment = document.createDocumentFragment();
  while (div.firstChild) {
      fragment.appendChild(div.firstChild);
  }
  $('#first').append(fragment);
  console.timeEnd('first');
  
  //createElement
  console.time('second');
  var span = document.createElement("span");
  span.innerHTML = htmz;
  $('#second').append(span);
  console.timeEnd('second');
  
  
  //jQuery
  console.time('third');
  $('#third').append(htmz);
  console.timeEnd('third');
  </code></pre>