title: Moving HTML element to bottom by using jQuery
body: <p>I have a HTML code as below:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
    &lt;div id="one"&gt;&lt;/div&gt;
    &lt;div id="two"&gt;&lt;/div&gt;
    &lt;div id="three"&gt;&lt;/div&gt;
    &lt;div id="foo"&gt;&lt;/div&gt;
    &lt;div id="bar"&gt;&lt;/div&gt;
    &lt;div id="four"&gt;&lt;/div&gt;
    &lt;div id="five"&gt;&lt;/div&gt;
    &lt;div id="six"&gt;&lt;/div&gt;
    &lt;div id="seven"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to move <code>&lt;div id="foo"&gt;&lt;/div&gt;</code> and <code>&lt;div id="bar"&gt;&lt;/div&gt;</code> to the bottom under <code>&lt;div id="seven"&gt;&lt;/div&gt;</code>. Should I use <code>insertAfter()</code> or <code>after()</code> or any jQuery function is better to achieve this requirement?</p>
  
  <p>Thanks</p>