.appendChild Vs jQuery.append()

JavaScript performance comparison

Revision 4 of this test case created by Fabio Buda

Info

Native javascript .appendChild Vs jQuery .append() methods.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="native"></div>
<div id="jquery"></div>
<script>
Benchmark.prototype.setup = function() {
    var native = document.getElementById("native");
    var jquery = $("#jquery");
   
    var obj = document.createElement("div");
    obj.className = 'myObject';
   
    var jQobj = $(obj);
   
    var jqObjString = "<div class='myObject'></div>";
};

Benchmark.prototype.teardown = function() {
    native.innerHTML = "";
    jquery.html("");
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Native .appendChild()
native.appendChild(obj);
pending…
jQuery .append()
jquery.append(jQobj);
pending…
jQuery .append() - HTMLplainString
jquery.append(jqObjString);
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:

1 comment

commented :

Add a comment