title: .append VS .html VS .innerHTML performance
body: <p>This site's run a test between the 3 different methods and it seems <code>.html</code> is the fastest, followed by <code>.append</code>. followed by <code>.innerHTML</code>. Can someone explain to me the reasons why?</p>
  
  <p>Here's the <a href="http://jsben.ch/#/yDvKH" rel="noreferrer">site which does the comparison</a> among the three methods.</p>
  
  <p>I have read this <a href="https://stackoverflow.com/questions/3015335/jquery-html-vs-append">this SO question</a> which is related but I don't really understand the given answer, and the question didn't really elaborate much regarding <code>.innerHtml</code>.</p>
  
  <p>I don't understand the following part: </p>
  
  <blockquote>
    <p>A temporary element is created, let's call it x. x's innerHTML is set to the string of HTML that you've passed. Then jQuery will transfer each of the produced nodes (that is, x's childNodes) over to a newly created document fragment, which it will then cache for next time. It will then return the fragment's childNodes as a fresh DOM collection.
    Note that it's actually a lot more complicated than that, as jQuery does a bunch of cross-browser checks and various other optimisations. E.g. if you pass just <code>&lt;div&gt;&lt;/div&gt;</code> to jQuery(), jQuery will take a shortcut and simply do document.createElement('div').</p>
  </blockquote>
  
  <p>Can someone simplify this?</p>