innerHTML vs createElement test (v15)

Revision 15 of this benchmark created by Thomas Giles on

Description

Bare-Bones

We shouldn't care about string concatenation, or outerHTML returns; we want to know if using innerHTML or createElement is faster. We also don't care about adding to a "live" element, but one that is hidden; just in a variable for example.

For that reason, I have created the innerHTML string and the target "container" div before the test.

Setup

var container = document.createElement("DIV");
    var HTML = new Array(101).join("<span></span>");

Test runner

Ready to run.

Testing in
TestOps/sec
100 element innerHTML
container.innerHTML = HTML;
ready
createElement and appendChild
for (var i = 0; i < 100; i++) {
  container.appendChild(document.createElement("span"));
}
ready

Revisions

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