Moving HTML element to bottom by using jQuery

Question

I have a HTML code as below:

<div id="wrap">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="foo"></div>
  <div id="bar"></div>
  <div id="four"></div>
  <div id="five"></div>
  <div id="six"></div>
  <div id="seven"></div>
</div>

I want to move <div id="foo"></div> and <div id="bar"></div> to the bottom under <div id="seven"></div>. Should I use insertAfter() or after() or any jQuery function is better to achieve this requirement?

Thanks

Answer 1

appendTo will move the elements to the end of the element's DOM

$('#foo, #bar').appendTo('#wrap');