innerHTML vs createElement() and appendChild()

JavaScript performance comparison

Revision 2 of this test case created by GarciaWebDev

Info

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

Preparation code

<script>
/*
 * DOMParser HTML extension
 * 2012-02-02
 *
 * By Eli Grey, http://eligrey.com
 * Public domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */
 
/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/
 
(function(DOMParser) {
    "use strict";
 
    var
      DOMParser_proto = DOMParser.prototype
    , real_parseFromString = DOMParser_proto.parseFromString
    ;
 
    // Firefox/Opera/IE throw errors on unsupported types
    try {
        // WebKit returns null on unsupported types
        if ((new DOMParser).parseFromString("", "text/html")) {
            // text/html parsing is natively supported
            return;
        }
    } catch (ex) {}
 
    DOMParser_proto.parseFromString = function(markup, type) {
        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
            var
              doc = document.implementation.createHTMLDocument("")
            , doc_elt = doc.documentElement
            , first_elt
            ;
 
            doc_elt.innerHTML = markup;
            first_elt = doc_elt.firstElementChild;
 
            if ( // are we dealing with an entire document or a fragment?
                   doc_elt.childElementCount === 1
                && first_elt.localName.toLowerCase() === "html"
            ) {
                doc.replaceChild(first_elt, doc_elt);
            }
 
            return doc;
        } else {
            return real_parseFromString.apply(this, arguments);
        }
    };
}(DOMParser));
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
innerHTML
 
document.body.innerHTML += '<div class="test"><p>This is a test</p></div>';
 pending…
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);
 pending…
DOMParser
 
var parser = new DOMParser();
var doc = parser.parseFromString('<div class="test"><p>This is a test</p></div>', 'text/html');
document.body.appendChild(doc.body.childNodes[0]);
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment