通过使用jQuery

Question

移动HTML元素到底我有如下一个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浏览器，火狐，IE7，IE8，IE9

OBJECTIVE ...将“其他”移动到底部...服务器端代码无法更改标记。

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