jQuery append html

JavaScript performance comparison

Test case created by galambalazs

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="mydiv" style="display:none"></div>

<script>
  var html = "<div>some<span>things</span><br>never<div>change</div></div>";
  var count = 50;
 
  function cleanup() {
   $("#mydiv").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
simple append
cleanup();
for (var i = count; i--;) {
 $("#mydiv").append(html);
}
pending…
nonsense v1 attr
cleanup();
for (var i = count; i--;) {
 $("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);
}
pending…
nonsense v2 new obj
cleanup();
for (var i = count; i--;) {
 var html_obj = $(html);
 $("#mydiv").append(html_obj);
}
pending…
nonsense v3 new elem
cleanup();
for (var i = count; i--;) {
 var frag = document.createElement('div');
 frag.innerHTML = html;
 $("#mydiv").append(frag);
}
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

galambalazs (revision owner) commented :

Just to make sure everyone gets it right: This test was made for a specific question for a guy who got a table as a string.

None of the edits had any relevance (e.g: appending elements, or using plain innerHTML).

http://stackoverflow.com/questions/117665/jquery-fastest-dom-insertion/4421104

Add a comment