innerHTML vs createElement() and appendChild()

JavaScript performance comparison

Test case created by GarciaWebDev

Info

Compares the performance of adding elements to DOM by using strings and innerHTML and creating DOMElement objects and appending them with appendChild().

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
innerHTML
document.body.innerHTML += '<div class="test"><p>This is a test</p></div>';
pending…
createElement() and appendChild()
var div = document.createElement('div');
div.className = 'test';

var p = document.createElement('p');
p.innerText = 'This is a test';

div.appendChild(p);
document.body.appendChild(div);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Anurag Mishra commented :

This test is biased. It forces the rendering engine to reconstruct the DOM for the entire body tag on each iteration when using innerHTML (hint: body.innerHTML += ...). That is a problem because the contents of the body tag are increasing with each iteration. On the other hand, the manual construction using appendChild only touches one node in each iteration. Do not get fooled by these results.

Add a comment