Swap DOM Elements

JavaScript performance comparison

Test case created by Luiz Ricardo

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
    <div id="div1" class="parte1" style="color:black">
        <p> Conteúdo da Div 1</p>
    </div>
    <div id="div2" class="parte2" style="color:blue">
        <p> Conteúdo da Div 2</p>
    </div>
    <div id="div3" class="parte3" style="color:red">
        <p> Conteúdo da Div 3</p>
    </div>
    <div id="div4" class="parte4" style="color:green">
        <p> Conteúdo da Div 4</p>
    </div>
    <hr/>
    <ul>
        <li id="A">item A</li>
        <li id="B">item B</li>
        <ul>
            <li id="B1">item B1</li>
            <li id="B2">item B2</li>
            <li id="B3">item B3</li>
        </ul>
        <li id="C">item C</li>
    </ul>
 </body>
      
<script>
Benchmark.prototype.setup = function() {
  (function ($) {
      
      $.fn.swap = function(anotherElement) {
          
          var sameParentStrategy = function(one, another) {
              var oneIndex = one.index();
              var anotherIndex = another.index();
              var swapFunction = function(first, second, firstIndex, secondIndex) {
                  if (firstIndex == secondIndex - 1) {
                      first.insertAfter(second);
                  } else {
                      var secondPrevious = second.prev();
                      second.insertAfter(first);
                      first.insertAfter(secondPrevious);
                  }
              }
              if (oneIndex < anotherIndex) {
                  swapFunction(one, another, oneIndex, anotherIndex);
              } else {
                  swapFunction(another, one, anotherIndex, oneIndex);
              }
          };
          
          var differentParentsStrategy = function(one, another) {
              var positionStrategy = function(e) {
                  var previous = e.prev();
                  var next = e.next();
                  var parent = e.parent();
                  if (previous.length > 0) {
                      return function(e) {
                          e.insertAfter(previous);
                      };
                  } else if (next.length > 0) {
                      return function(e) {
                          e.insertBefore(next);
                      };
                  } else {
                      return function(e) {
                          parent.append(e);
                      };
                  }
              }
              var oneStrategy = positionStrategy(one);
              var anotherStrategy = positionStrategy(another);
              oneStrategy(another);
              anotherStrategy(one);
              return this;
          };
                  
          //check better strategy
          var one = $(this);
          var another = $(anotherElement);
          if (one.parent().get(0) == another.parent().get(0)) {
              sameParentStrategy(one, another);
          } else {
              differentParentsStrategy(one, another);
          }
          
      };
   
  }(jQuery));
  
  (function ($) {
      $.fn.swap2 = function(anotherElement) {
        var a = $(this);
        var b = $(anotherElement);
        var swap = $("<span/>");
        a.after(swap).detach();
        b.after(a).detach();
        swap.after(b).detach();
      }
  }(jQuery));
  
  
  (function ($) {
      $.fn.swap3 = function(anotherElement) {
          var a = $(this).get(0);
          var b = $(anotherElement).get(0);
          var swap = document.createElement('span');
          a.parentNode.insertBefore(swap, a);
          b.parentNode.insertBefore(a, b);
          swap.parentNode.insertBefore(b, swap);
          swap.remove();
      }
  }(jQuery));
  
  (function ($) {
      $.fn.swap4 = function(anotherElement) {
        // cache elements
  var $div1 = $(this),
      $div2 = $(anotherElement);
  
  // clone elements and their contents
  var $div1Clone = $div1.clone(),
      $div2Clone = $div2.clone();
  
  // switch places
  $div1.replaceWith($div2Clone);
  $div2.replaceWith($div1Clone);
      }
  }(jQuery));
  

};
</script>

Preparation code output

<body> <div id="div1" class="parte1" style="color:black"> <p> Conteúdo da Div 1</p> </div> <div id="div2" class="parte2" style="color:blue"> <p> Conteúdo da Div 2</p> </div> <div id="div3" class="parte3" style="color:red"> <p> Conteúdo da Div 3</p> </div> <div id="div4" class="parte4" style="color:green"> <p> Conteúdo da Div 4</p> </div> <hr/> <ul> <li id="A">item A</li> <li id="B">item B</li> <ul> <li id="B1">item B1</li> <li id="B2">item B2</li> <li id="B3">item B3</li> </ul> <li id="C">item C</li> </ul> </body>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Swap 4 (same level)
    $('#div1').swap4('#div4');
    $('#div1').swap4('#div3');
    $('#div1').swap4('#div2');
    $('#div2').swap4('#div3');
    $('#div3').swap4('#div4');
    $('#div4').swap4('#div3');
    $('#div3').swap4('#div2');
    $('#div4').swap4('#div1');
pending…
Swap 4 (tree)
    $('#A').swap4('#B');
    $('#A').swap4('#B1');
    $('#A').swap4('#B2');
    $('#A').swap4('#B3');
    $('#B').swap4('#B1');
    $('#B').swap4('#B2');
    $('#B').swap4('#B3');
    $('#C').swap4('#B1');
    $('#C').swap4('#B2');
pending…
Swap 1 (same level)
    $('#div1').swap('#div4');
    $('#div1').swap('#div3');
    $('#div1').swap('#div2');
    $('#div2').swap('#div3');
    $('#div3').swap('#div4');
    $('#div4').swap('#div3');
    $('#div3').swap('#div2');
    $('#div4').swap('#div1');
pending…
Swap 1 (tree)
    $('#A').swap('#B');
    $('#A').swap('#B1');
    $('#A').swap('#B2');
    $('#A').swap('#B3');
    $('#B').swap('#B1');
    $('#B').swap('#B2');
    $('#B').swap('#B3');
    $('#C').swap('#B1');
    $('#C').swap('#B2');
pending…
Swap 2 (same level)
    $('#div1').swap2('#div4');
    $('#div1').swap2('#div3');
    $('#div1').swap2('#div2');
    $('#div2').swap2('#div3');
    $('#div3').swap2('#div4');
    $('#div4').swap2('#div3');
    $('#div3').swap2('#div2');
    $('#div4').swap2('#div1');
pending…
Swap 2 (tree)
    $('#A').swap2('#B');
    $('#A').swap2('#B1');
    $('#A').swap2('#B2');
    $('#A').swap2('#B3');
    $('#B').swap2('#B1');
    $('#B').swap2('#B2');
    $('#B').swap2('#B3');
    $('#C').swap2('#B1');
    $('#C').swap2('#B2');
pending…
Swap 3 (same level)
    $('#div1').swap3('#div4');
    $('#div1').swap3('#div3');
    $('#div1').swap3('#div2');
    $('#div2').swap3('#div3');
    $('#div3').swap3('#div4');
    $('#div4').swap3('#div3');
    $('#div3').swap3('#div2');
    $('#div4').swap3('#div1');
pending…
Swap 3 (tree)
    $('#A').swap3('#B');
    $('#A').swap3('#B1');
    $('#A').swap3('#B2');
    $('#A').swap3('#B3');
    $('#B').swap3('#B1');
    $('#B').swap3('#B2');
    $('#B').swap3('#B3');
    $('#C').swap3('#B1');
    $('#C').swap3('#B2');
pending…

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

Compare results of other browsers

0 Comments

Conteúdo da Div 1

Conteúdo da Div 2

Conteúdo da Div 3

Conteúdo da Div 4