JQuery Detach/Append vs Clone/ReplaceWith (v3)

Revision 3 of this benchmark created by Charles Prescott Collins IV on

Description

Initial tests were not accurate, The second test was iterating over the results of the first.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<p id="various_loop_container">
</p>
<script>
  var spanList = '',
      target = document.getElementById("various_loop_container");

  function populate() {

    var iterations = 100;

    target.innerHTML = "";

    while (iterations--) {
      var span = "<span>" + iterations + "</span>";
      spanList += span;
    }

    target.innerHTML = spanList;

  }

  populate();
</script>

Setup

target.innerHTML = spanList; // reset the target code

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.remove();
  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.