CODEWITHSUNDEEP
jqueryhtml
Charles Yeung
Charles Yeung

Reputation: 38825

Moving HTML element to bottom by using jQuery

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

Answers (4)

Peter Kigonya
Peter Kigonya

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

minh
minh

Reputation: 69

You can use the following piece of code:

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

Upvotes: 1

benastan
benastan

Reputation: 2278

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

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

Upvotes: 19

bfavaretto
bfavaretto

Reputation: 71939

Yes, you can use .after():

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

Upvotes: 1

Related Questions