jQuery append html (v17)

Revision 17 of this benchmark created by Dan Mitchell on

Description

Building the HTML as one big string, then adding it in one single .append() call. Also increased 'count' to 20 to make the difference more noticeable.

Preparation HTML

<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 = 20;
  
  function cleanup() {
   $("#mydiv").html("");
  }
</script>

Setup

cleanup();

Test runner

Ready to run.

Testing in
TestOps/sec
simple append
for (var i = count; i--;) {
 $("#mydiv").append(html);
}
ready
nonsense v1 attr
for (var i = count; i--;) {
 $("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);
}
ready
nonsense v2 new obj
for (var i = count; i--;) {
 var html_obj = $(html);
 $("#mydiv").append(html_obj);
}
ready
nonsense v3 new elem
for (var i = count; i--;) {
 var frag = document.createElement('div');
 frag.innerHTML = html;
 $("#mydiv").append(frag);
}
ready
no jquery
for (var i = count; i--;) {
 document.getElementById('mydiv').innerHTML += html;
}
ready
all HTML at once
var allhtml = "";
for (var i = count; i--;) {
  allhtml += html;
} 
$("#mydiv").append(allhtml);
ready

Revisions

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