insertAdjacentHTML vs innerHTML vs appendChild (v2)

Revision 2 of this benchmark created on

Description

The original test didn't append the new span to the target node.

Also, the .innerHTML += ... verion is at a disadvantage since the DOM keeps getting longer and longer. The longer the DOM, the more processing will be required.

To even it out, I cleared the node first.

Preparation HTML

<div id="test"></div>

Setup

var node = document.getElementById("test"), span;

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
node.innerHTML = "";
node.innerHTML += '<span>test</span>';
ready
appendChild
node.innerHTML = "";
span = node.appendChild(document.createElement('span'));
span.appendChild(document.createTextNode('test'));
ready
insertAdjacentHTML
node.innerHTML = "";
node.insertAdjacentHTML('beforeend', '<span>test</span>');
ready

Revisions

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