realistic innerHTML vs. appendChild vs jQuery.append() (v13)

Revision 13 of this benchmark created on

Preparation HTML

<div id="result" style="display:none;" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var el = document.getElementById("result");
  var jqEl = $(el);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var html = '<strong>Some html here</strong><p>Lorem ipsum</p><div><ul><li>List</li><li>Item</li></ul></div>';
el.innerHTML = html;
ready
appendChild
var frag = document.createDocumentFragment(),
    sT = document.createTextNode('Some html here'),
    s = document.createElement("strong"),
    pT = document.createTextNode('Lorem ipsum'),
    p = document.createElement("p"),
    d = document.createElement("div"),
    u = document.createElement("ul"),
    l1T = document.createTextNode('List'),
    l1 = document.createElement("li"),
    l2T = document.createTextNode('Item'),
    l2 = document.createElement("li");
s.appendChild(sT);
p.appendChild(pT);
l1.appendChild(l1T);
u.appendChild(l1);
l2.appendChild(l2T);
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(s);
frag.appendChild(p);
frag.appendChild(d);
el.innerText = "";
el.appendChild(frag);
ready
jQuery.append()
jqEl.append($('<strong>').text('Some html here'));
jqEl.append($('<p>').text('Lorem ipsum'));
jqEl.append($('<div>').append($('<ul>').append($('<li>').text('List').append($('<li>').text('Item')))));

//var html = '<strong>Some html here</strong><p>Lorem ipsum</p><div><ul><li>List</li><li>Item</li></ul></div>';
//el.innerHTML = html;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.