javascript - 将元素的顺序更改为顶部

Question

   <div id="container">
        <div id="1">1</div>
        <div id="2">2</div>
        <div id="3">3</div>
        <div id="4">4</div>
   </div>         

如何div使用纯 javascript 将 #4 移动到顶部 我看到了这个，但它只能将元素移动到底部。例如，这将有助于将#1 移动到底部。通过将所有其他元素移动到底部，它将 #4 移动到顶部。没有直接的方法可以将#4 移到顶部吗？

Answer 1

var _4th = document.getElementById('4'); // BTW. numeric IDs are not valid
var parent = _4th.parentNode;
var _1st = parent.firstChild;

parent.insertBefore(_4th, _1st);

一个JSFiddle 示例

Answer 2

你可以试试这个：

var container = document.getElementById("container");
var el = document.getElementById("4")​;
container.insertBefore(el, container.firstChild);

Answer 3

jQuery解决方案是，

你的 HTML 是，

    <div id="container">
        <div id="1">1</div>
        <div id="2">2</div>
        <div id="3">3</div>
        <div id="4">4</div>
   </div>  ​

一些额外的CSS，

#container {
    border:1px solid #888;
    padding:10px;
    margin:5px;
    border-radius:10px;
}
#container div{
    border:1px solid #Cda12a;
    margin:5px;
    text-align:center;
    height:25px;
    color:#fff;
    background:#000;
}

而JavaScript代码是，

$(function() {
    $( "#container" ).sortable();
    $( "#container" ).disableSelection();
});​

请在此处参考工作示例

Answer 4

jQuery("#4").before(jQuery("#1").html());

试试这个