innerHTML vs appendChild

Benchmark created on

Preparation HTML

<div id="hold"></div>

Setup

var hold = document.getElementById("hold");

Teardown


    hold.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
text + innerHTML
var txt = '';
for (var i = 0; i < 100; i++) {
txt += '<a class="asdasd" href="#....">';
txt += '<img src="...." alt="" />';
txt += '</a>';
}
hold.innerHTML = txt;
ready
fragment + appendChild
var i = 0,
frag = document.createDocumentFragment(),
img, a;

for (; i < 100; i++) {
                        img = document.createElement('img');
                        img.src = '/sdf/sdf';
                        a = document.createElement('a');
                        a.className = 'asdads';
                        a.href = '#...';
                        a.appendChild(img);
                        frag.appendChild(a);
                }
hold.appendChild(frag);
ready

Revisions

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