innerHTML vs createElement() and appendChild() (v17)

Revision 17 of this benchmark created by Rumen Neshev 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
document.body.innerHTML = '<div class="test"><p>This is a test</p></div>';
ready
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);
ready

Revisions

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