JQuery Detach/Append vs Clone/ReplaceWith (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p id="various_loop_container"></p>
<script>
  var target = document.getElementById("various_loop_container");
  
  function populate() {
   target.innerHTML = "";
   var spanList = "";
   var iterations = 100;
   while (iterations--) {
    var span = "<span>" + iterations + "</span>";
    spanList += span;
   }
   target.innerHTML = spanList;
  }
  populate();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Clone / ReplaceWith
$(target).children().each(function() {
 var $this = $(this);
 var clone = $this.clone();
 var iTag = $("<i/>");
 iTag.append(clone);
 $this.replaceWith(iTag);
});
ready
Detach / Append
$(target).children().each(function() {
 var $this = $(this);
 $this.detach();
 var bTag = $("<b/>");
 $this.appendTo(bTag);
 $(target).append(bTag);
});
ready

Revisions

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