Перемещение HTML элемент вниз с помощью JQuery

Question

У меня есть HTML-код, как показано ниже:

<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> 

Я хочу, чтобы переместить <div id="foo"></div> и <div id="bar"></div> на дно под <div id="seven"></div>. Должен ли я использовать insertAfter() или after() или любую функцию jQuery лучше выполнить это требование?

Благодаря

Answer 1

appendTo будет перемещать элементы до конца DOM элемента

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

Answer 2

Да, вы можете использовать .after():

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

Answer 3

Вы можете использовать следующий фрагмент кода :

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

Answer 4

Это лучшее, что я мог после небольшого чтения через ... мне нужно было что-то немного более общий характер, который будет использоваться по всему сайту:

БРАУЗЕР ПРОВЕРЕНО: Chrome, Firefox, IE7, IE8, IE9

ЦЕЛЬ ... переместить «Другое» в нижнюю часть ... Код на стороне сервера не изменил разметку.

<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>