innerHTML vs createElement test (v9)

Revision 9 of this benchmark created on

Preparation HTML

</script>
<div id="container">
</div>

Setup

document.getElementById('container').innerHTML = '';

Teardown


    document.getElementById('container').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
1000 element string innerHTML
var innerHTMLstr = '<div>';
var i;
for (i = 0; i < 1000; i++) {
  innerHTMLstr += '<div><span>' + i + '</span></div>';
}
innerHTMLstr+='</div>';

document.getElementById('container').innerHTML = innerHTMLstr;
ready
1000 element innerHTML
var container = document.getElementById('container');
var outerdiv = document.createDocumentFragment();
var i, div, span;
for (i = 0; i < 1000; i++) {
  div = document.createElement('div');
  span = document.createElement('span');
  span.innerHTML = i;
  div.appendChild(span);
  outerdiv.appendChild(div);
}

container.appendChild(outerdiv);
ready
1000 createTextNode
var container = document.getElementById('container');
var outerdiv = document.createDocumentFragment();
var i, div, span;
for (i = 0; i < 1000; i++) {
  div = document.createElement('div');
  span = document.createElement('span');
  span.appendChild(document.createTextNode(i));
  div.appendChild(span);
  outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
ready
1000 element textContent
var container = document.getElementById('container');
var outerdiv = document.createDocumentFragment();
var i, div, span;
for (i = 0; i < 1000; i++) {
  div = document.createElement('div');
  span = document.createElement('span');
  span.textContent = i;
  div.appendChild(span);
  outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
ready
1000 element innerText
var container = document.getElementById('container');
var outerdiv = document.createDocumentFragment();
var i, div, span;
for (i = 0; i < 1000; i++) {
  div = document.createElement('div');
  span = document.createElement('span');
  span.innerText = i;
  div.appendChild(span);
  outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
ready
Clone
var container = document.getElementById('container');
var outerdiv = document.createDocumentFragment();
var i, div, span;
var p;

  div = document.createElement('div');
  span = document.createElement('span');
  //span.appendChild(document.createTextNode(''));
  div.appendChild(span);

for (i = 0; i < 1000; i++) {
p = div.cloneNode(true);
p.firstChild.textContent = i;
outerdiv.appendChild(p);
}
container.appendChild(outerdiv);
ready
Clone2
var container = document.getElementById('container');
var i, div, span;
var p;

  div = document.createElement('div');
  span = document.createElement('span');
  span.appendChild(document.createTextNode(''));
  div.appendChild(span);

for (i = 0; i < 1000; i++) {
p = div.cloneNode(true);
p.firstChild.firstChild.nodeValue = i;
container.appendChild(p);
}
ready

Revisions

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