title: Why is using innerHTML to append a large number of elements to the DOM slower than JQuery's append() function?
body: <p>I have a vanilla JavaScript function to test appending large numbers of elements to the DOM:</p>
  
  <pre><code>var start = new Date().getTime();
  var blah;
  var div = document.getElementById("me");
  for (i = 0; i &lt; 5000; ++i) {
      div.innerHTML += "&lt;div&gt;" + i + "&lt;/div&gt;";//Simply add to div.
  }
  var end = new Date().getTime();
  var time = end - start;
  alert('Execution time: ' + time);
  </code></pre>
  
  <h3>Results:</h3>
  
  <pre class="lang-none prettyprint-override"><code>         Chrome           IE10
           ------           -----  
  Vanilla      39             130  (seconds)
  </code></pre>
  
  <h3>JQuery:</h3>
  
  <pre><code>for (i = 0; i &lt; 5000; ++i) {
      $("#me").append("&lt;div&gt;" + i + "&lt;/div&gt;");//Now using append instead.
  }
  </code></pre>
  
  <h3>Results</h3>
  
  <pre class="lang-none prettyprint-override"><code>         Chrome           IE10
           ------           -----  
  Vanilla   39000         130,000  (milliseconds) 
  JQuery      260            1300  (milliseconds) 
  </code></pre>
  
  <p><strong>NB</strong>: It didn't seem to have any impact on performance if I used the <code>$("#me")</code> selector or passed in <code>$(div)</code></p>
  
  <h3>Vanilla with <code>AppendChild</code>:</h3>
  
  <pre><code>for (i = 0; i &lt; 5000; ++i) {
      var el = document.createElement("div");//Now create an element and append it.
      el.innerHTML = i;
      div.appendChild(el);
  }
  </code></pre>
  
  <pre class="lang-none prettyprint-override"><code>             Chrome           IE10
               ------           -----  
  Vanilla       39000         130,000  (ms)   
  JQuery          260            1300  (ms) 
  AppendChild      30             240  (ms)
  </code></pre>
  
  <p>To my huge surprise this was by far the fastest, most performant. On Chrome it takes a whopping 30ms or so, and on IE it takes around 240ms. </p>
  
  <p>You can play with all the variations here: <a href="http://jsfiddle.net/6VC5R/" rel="nofollow">Fiddle</a></p>
  
  <p>I know there could be many other variations to test, but what is jQuery doing behind the scenes to make it's <code>.append()</code> so much faster than native JS <code>innerHTML +=</code> and why is creating a new element and appending it even faster?</p>