jQuery append html

Benchmark created by galambalazs on

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

Test runner

Ready to run.

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

Revisions

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