title: jQuery order elements, remove, detach, clone, append memory leaks
body: <p>I have a parent div with around 300 div's inside its all containing an image and some text. i have an array which contains all the information i need to reorder the divs, using references..</p>
  
  <p>if if then loop through the array after i had ordered it and then move the elements accordinly i get severe memory leaks of up to 100MB extra time i sort them!</p>
  
  <p>i have tried a few ways and still no success</p>
  
  <pre><code>$.each(gameArray , function($idx, $itm) { 
      $("#elementid"+ $itm.split('|#|')[0] ).appendTo($("#parent"));
  }); 
  </code></pre>
  
  <p>another attempt</p>
  
  <pre><code>$.each(gameArray , function($idx, $itm) { 
      var element = $("#elementid"+ $itm.split('|#|')[0] ).detach();
      element.appendTo($("#parent"));
      element = null;
  }); 
  </code></pre>
  
  <p>another attempt</p>
  
  <pre><code>$.each(gameArray , function($idx, $itm) { 
      var element = $("#elementid"+ $itm.split('|#|')[0] ).clone(true).remove();
      element.appendTo($("#parent"));
      element = null;
  }); 
  </code></pre>
  
  <p>i read that the detach keeps the element in DOM so when you put it back into the page it doesnt recreate anything and doesn't increase the memory, but it doesnt seem to work?!</p>
  
  <p>is there something im missing? there must be a way of sorting them without increasing memory by that much? </p>
  
  <p>All of the example i have found have been using ordered list's with around 10 list elements in so you dont notice the memory increase!</p>