title: Should you add HTML to the DOM using innerHTML or by creating new elements one by one?
body: <p>There are two methods to add HTML-code to the DOM and I don't know what is the best way to do it.</p>
  
  <p><strong>First method</strong></p>
  
  <p>The first way is the easy one, I could simply add HTML-code (with jQuery) using <code>$('[code here]').appendTo(element);</code> which is much like <code>element.innerHTML = [code here];</code></p>
  
  <p><strong>Second method</strong></p>
  
  <p>Another way is to create all the elements one by one like:</p>
  
  <pre><code>// New div-element
  var div = $('&lt;div/&gt;', {
                id: 'someID',
                class: 'someClassname'
            });
  
  // New p-element that appends to the previous div-element
  $('&lt;p/&gt;', {
      class: 'anotherClassname',
      text: 'Some textnode',
  }).appendTo(div);
  </code></pre>
  
  <p>This method uses core functions like <code>document.createElement</code> and <code>element.setAttribute</code>.</p>
  
  <p>When should I use the first method and when the second? Is method two faster than method one?</p>
  
  <p><strong>Edit - Result of <a href="http://harmen.no-ip.org/so/speedtest.html" rel="noreferrer">speed tests</a></strong></p>
  
  <p>I did three speed tests from which the code follows:</p>
  
  <pre><code>$(document).ready(function(){
      // jQuery method - Above mentioned as the second method
      $('#test_one').click(function(){
          startTimer();
          var inhere = $('#inhere');
          for(i=0; i&lt;1000; i++){
              $(inhere).append($('&lt;p/&gt;', {'class': 'anotherClassname' + i, text: 'number' + i}));
          }
          endTimer();
          return false;
      });
  
      // I thought this was much like the jQuery method, but it was not, as mentioned in the comments
      $('#test_two').click(function(){
          startTimer();
          var inhere = document.getElementById('inhere');
          for(i=0; i&lt;1000; i++){
              var el = document.createElement('p')
              el.setAttribute('class', 'anotherClassname' + i);
              el.appendChild(document.createTextNode('number' + i));
              inhere.appendChild(el);
          }
          endTimer();
          return false;
      });
  
      // This is the innerHTML method
      $('#test_three').click(function(){
          startTimer();
          var inhere = document.getElementById('inhere'), el;
          for(i=0; i&lt;1000; i++){
              el += '&lt;p class="anotherClassname' + i + '"&gt;number' + i + '&lt;/p&gt;';
          }                
          inhere.innerHTML = el;
          endTimer();
          return false;
      });
  });
  </code></pre>
  
  <p>Which gave the following really surprising results</p>
  
  <pre><code>               Test One   Test Two   Test Three  
  +-------------+---------+----------+------------+
  | Chrome    5 | ~125ms  |  ~10ms   |   ~15ms    |
  | Firefox 3.6 | ~365ms  |  ~35ms   |   ~23ms    |
  | IE        8 | ~828ms  |  ~125ms  |   ~15ms    |
  +-------------+---------+----------+------------+
  </code></pre>
  
  <p>All in all the innerHTML method seems to be the fastest one and is in many cases the most readable one.</p>