html append speed

Benchmark created on

Preparation HTML

<div id="div">

</div>

Setup

var element = document.getElementById('div');
  element.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var s = [];

for(var i = 0; i < 1000; i++) {
  s.push('<div><span><strong>TEST</strong></span></div>');
}

element.innerHTML = s.join('');
ready
createElement
for(var i = 0; i < 1000; i++) {
var div = document.createElement('div');
var span = document.createElement('span');
var strong = document.createElement('strong');
strong.innerHTML = 'TEST';

span.appendChild(strong);
div.appendChild(span);
element.appendChild(div);
}
ready
createElement-clone
var div = document.createElement('div');
var span = document.createElement('span');
var strong = document.createElement('strong');
strong.innerHTML = 'TEST';
span.appendChild(strong);
div.appendChild(span);

for(var i = 0; i < 1000; i++) {
element.appendChild(div.cloneNode(true));
}
ready

Revisions

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