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
appendTo will move the elements to the end of the element's DOM
$('#foo, #bar').appendTo('#wrap');
Yes, you can use .after():
$('#seven').after($('#foo, #bar'));
You can use the following piece of code:
$('#wrap').append('<div id="foo"></div>')
This is the best I could after a little read thru... I needed something a little more generic to be used across the site:
BROWSER TESTED: Chrome, Firefox, IE7, IE8, IE9
OBJECTIVE... move "Other" to bottom... The server side code had no way of changing 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>
