Move an HTML element down with jQuery

Question

I have 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> below below <div id="seven"></div> . Should I use insertAfter() or after() or is any jQuery function better to fulfill this requirement?

thanks

Answer 1

appendTo will move elements to the end of the DOM element

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

Answer 2

You can use the following code snippet:

 $('#wrap').append('<div id="foo"></div>') 

Answer 3

Yes, you can use .after() :

 $('#seven').after($('#foo, #bar')); 

Answer 4

This is the best I could after a little reading ... I needed something more general to use on the site:

BROWSER TESTED: Chrome, Firefox, IE7, IE8, IE9

PURPOSE ... move "Other" to the end ... Server-side code has not changed the markup.

 <select name="anyName" id="anyID" > <option value="Other">Other</option> <option value="Entry 1" >Entry 1</option> <option value="Entry 2" >Entry 2</option> <option value="Entry 3" >Entry 3</option> </select> <script type="text/javascript"> $(document).ready(function() { $("select option").each(function() { if($(this).text() === "Other" && $(this).parent("select").children("option:last-child").text() !== "Other") { $(this).insertAfter($(this).parent("select").children("option:last-child")); } }); }); </script>