innerHTML vs jQuery vs createElement() and appendChild()

JavaScript performance comparison

Revision 14 of this test case created

Info

Compares the performance of adding elements to the DOM by using strings and innerHTML, creating the DOMElement node tree and appending with appendChild(), and using jQuery to replace content with $elm.html().

Preparation code

<!-- Existing DOM elements into which the tests will append new content -->
<div id="parent-inject">Replace me via <code>elm.innerHTML()</code></div>
<hr/>
<div id="parent-create">Replace me via <code>elm.appendChild()</code></div>
<hr/>
<div id="parent-jquery">Replace me via <code>$elm.html()</code></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    /***
    * Create a realistic, level playing field by storing references to container
    * elements beforehand, as you would likely do in a real webapp.
    ***/

   
    // Existing DOM elements into which the tests will append new content
    var parentInject = document.getElementById('parent-inject');
    var parentCreate = document.getElementById('parent-create');
    var $parentJQuery = $('#parent-jquery');
   
    // This content string is assigned to a variable in each loop of each test.
    var contentString = '<span class="org"></span>';
};
</script>

Preparation code output

Replace me via elm.innerHTML()

Replace me via elm.appendChild()

Replace me via $elm.html()

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
// Initialize the new content string. Assigns the string to a local variable to be more realistic (e.g. you'd likely do the same with the response body of an AJAX call).
var content = contentString;

// Inject the new content
parentInject.innerHTML = content;
pending…
createElement() and appendChild()
parentCreate.removeChild(parentCreate.firstChild);
var span = document.createElement('span');
span.setAttribute("class", "org");

parentCreate.appendChild(span);
pending…
jQuery.fn.html()
// Initialize the new content string. Assigns the string to a local variable to be more realistic (e.g. you'd likely do the same with the response body of an AJAX call).
var content = contentString;

// Inject the new content
$parentJQuery.html(content);
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