innerHTML vs createElement() and appendChild() (v18)

Revision 18 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().

Preparation HTML

<div id="test" style="display:none;"></div

Setup

var testDiv = document.getElementById("test");

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
testDiv.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);
testDiv.appendChild(div);
ready

Revisions

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