innerHTML vs createElement, appendChild (v3)

Revision 3 of this benchmark created on

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var ul = document.createElement('ul');
ul.innerHTML = "<li></li><li></li><li></li><li></li>";
ready
createElement, appendChild
var
ul = document.createElement('ul'),
    li_1 = document.createElement('li'),
    li_2 = document.createElement('li'),
    li_3 = document.createElement('li'),
    li_4 = document.createElement('li');
ul.appendChild(li_1);
ul.appendChild(li_2);
ul.appendChild(li_3);
ul.appendChild(li_4);
ready
createElement, appendChild, cloneNode
var
ul = document.createElement('ul'),
    li_1 = document.createElement('li');
ul.appendChild(li_1);
ul.appendChild(li_1.cloneNode(false));
ul.appendChild(li_1.cloneNode(false));
ul.appendChild(li_1.cloneNode(false));
ready

Revisions

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