изменить порядок элементов в верхней

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 # 4 в верхней части с помощью чистого JavaScript я видел this, но он работает только для перемещения элементов в нижней части. например, что будет работать, чтобы переместить # 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 example

Answer 2

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

попробовать это

Answer 3

Вы можете попробовать это:

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

Answer 4

решение 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(); 
});​ 

Пожалуйста, обратитесь рабочий пример here