jQuery append html (v13)

Revision 13 of this benchmark created on

Description

Adding for loop in the Test "build new element tree manually"

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/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 = 100;
  
  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
build new element tree manually
cleanup();
for (var i = count; i--;) {
  var divE = document.createElement('div');
  divE.appendChild(document.createTextNode('some'));
  var spanE = document.createElement('span');
  spanE.appendChild(document.createTextNode('things'));
  divE.appendChild(spanE);
  divE.appendChild(document.createElement('br'));
  divE.appendChild(document.createTextNode('never'));
  var change = document.createElement('div');
  change.appendChild(document.createTextNode('change'));
  divE.appendChild(change);
  $("#mydiv").append(divE);
}
ready

Revisions

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