Reputation: 38825
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
Upvotes: 5
Views: 12637
Reputation: 86
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>
Upvotes: 1
Reputation: 69
You can use the following piece of code:
$('#wrap').append('<div id="foo"></div>')
Upvotes: 1
Reputation: 2278
appendTo will move the elements to the end of the element's DOM
$('#foo, #bar').appendTo('#wrap');
Upvotes: 19
Reputation: 71939
Yes, you can use .after()
:
$('#seven').after($('#foo, #bar'));
Upvotes: 1