createElement + appendChild vs innerHTML vs createDocumentFragment + createElement + appendChild vs createContextualFragment + appendChild vs DOMParser + adoptNode + appendChild vs insertAdjacentHTML(BeforeEnd)

Benchmark created by syoichi on

Preparation HTML

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

Setup

var doc, test;
    
    doc = document;
    test = doc.getElementById('test');
    
    if (!test) {
        test = doc.body.appendChild(doc.createElement('div'));
        test.id = 'test';
    }

Teardown


    var test;
    
    test = doc.getElementById('test');
    
    test.parentNode.replaceChild(test.cloneNode(false), test);

Test runner

Ready to run.

Testing in
TestOps/sec
createElement + appendChild
test.appendChild(doc.createElement('div'));
ready
innerHTML
test.innerHTML += '<div></div>';
ready
createDocumentFragment + createElement + appendChild
test.appendChild(
    doc.createDocumentFragment().appendChild(
        doc.createElement('div')
    )
);
ready
createContextualFragment + appendChild
var range;

range = doc.createRange();

range.selectNodeContents(doc.body);
test.appendChild(range.createContextualFragment('<div></div>'));
range.detach();
ready
DOMParser + adoptNode + appendChild
test.appendChild(
    doc.adoptNode(
        (new DOMParser()).parseFromString(
            '<div></div>',
            'text/xml'
        ).documentElement
    )
);
ready
insertAdjacentHTML(BeforeEnd)
test.insertAdjacentHTML('BeforeEnd', '<div></div>');
ready

Revisions

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