title: Rearrange the order HTML elements appear in with JavaScript or jQuery
body: <p>I'm building a modular building program and have a side panel where the user can add the code of a module in order to make it appear in the list.</p>
  
  <p>The list is simply span tags with text in. Since they are already in a set order in the HTML, they appear in that default order when they are made visible, rather than appearing at the bottom of the list each time a new one is made visible.</p>
  
  <p>My workaround is to make all of the spans positioned absolute and use some jQuery/JS to do some calculations and move the latest visible-made span to the bottom.</p>
  
  <p>This code works in moving the input field and button to the bottom of the list:</p>
  
  <pre><code>var searchModule = 0;
  $("#add_module_button").click(function(){
     searchModule = "#" + document.getElementById("add_module_input").value;
     $(searchModule).css('display', 'block');
     visibleModules = $('.side_module:visible').length * 50 + "px";
     $('#add_a_module').css('top', visibleModules);
  });
  </code></pre>
  
  <p>Is there a better solution out there for re-arranging HTML elements without essentially faking it with absolute positioning?</p>