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

Revision 28 of this benchmark created by gollum 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 and textContent
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);
frag.appendChild(s);
p.appendChild(pT);
frag.appendChild(p);
l1.appendChild(l1T);
u.appendChild(l1);
l2.appendChild(l2T);
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
//remove any child elements, since setting innerHTML will also do so
el.textContent = "";
el.appendChild(frag);
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);
frag.appendChild(s);
p.appendChild(pT);
frag.appendChild(p);
l1.appendChild(l1T);
u.appendChild(l1);
l2.appendChild(l2T);
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
//remove any child elements, since setting innerHTML will also do so
while (el.firstChild) {
  el.removeChild(el.firstChild);
}
el.appendChild(frag);
ready
appendChild/textContent, no createTextNode
var frag = document.createDocumentFragment(),
  s = document.createElement("strong"),
  p = document.createElement("p"),
  d = document.createElement("div"),
  u = document.createElement("ul"),
  l1 = document.createElement("li"),
  l2 = document.createElement("li");
s.textContent = 'Some html here';
frag.appendChild(s);
p.textContent = 'Lorem ipsum';
frag.appendChild(p);
l1.textContent = 'List';
u.appendChild(l1);
l2.textContent = 'Item';
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
//remove any child elements, since setting innerHTML will also do so
el.textContent = "";
el.appendChild(frag);
ready
appendChild/textContent, no createTextNode, no reset
var frag = document.createDocumentFragment(),
  s = document.createElement("strong"),
  p = document.createElement("p"),
  d = document.createElement("div"),
  u = document.createElement("ul"),
  l1 = document.createElement("li"),
  l2 = document.createElement("li");
s.textContent = 'Some html here';
frag.appendChild(s);
p.textContent = 'Lorem ipsum';
frag.appendChild(p);
l1.textContent = 'List';
u.appendChild(l1);
l2.textContent = 'Item';
u.appendChild(l2);
d.appendChild(u);
frag.appendChild(u);
//target node is empty and doesn't require clearing
el.appendChild(frag);
ready

Revisions

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