innerHTML vs createElement() and appendChild() (v3)

Revision 3 of this benchmark created by jbdemonte on

Description

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

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var parent = document.createElement("div");
parent.innerHTML = '<div class="test"><p>This is a test</p></div>';
ready
createElement() and appendChild()
var parent = document.createElement("div");

var div = document.createElement('div');
div.className = 'test';

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

div.appendChild(p);
parent.appendChild(div);
ready

Revisions

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