realistic innerHTML vs. appendChild

Benchmark created by ron on

Preparation HTML

<div id="result" style="display:none;" />
<script>
  var el = document.getElementById("result");
</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.appendChild(frag);
ready

Revisions

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