var bt = document.getElementById("bt"); bt.onclick = function() { var rslt= document.getElementById('disk1'); var item = document.getElementById('st3'); item.insertBefore(rslt, item.childNodes[0]); };
<div> <div class='st1' id='st1'><div id='disk1'></div> <div id='disk2'></div> <div id='disk3'></div> </div> <div class='st2' id='st2'></div> <div class='st3' id='st3'></div> </div> <input type='button' id="bt" onclick="MoveDisk('disk1','st3')" value='Click Me' />
#disk1 { width: 66px; height: 60px; background-color: RGB(265,161,323); margin: auto; border-radius: 5px; box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.5); } #disk2 { width: 133px; height: 60px; background-color: RGB(156,326,468); margin: auto; border-radius: 5px; box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.5); } #disk3 { width: 200px; height: 60px; background-color: RGB(289,621,233); margin: auto; border-radius: 5px; box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.5); } #container { margin: 0 auto; background: #fc0; width: 750px; height: 200px; position: relative; padding-bottom: 50px; } #st1 { width: 250px; border-bottom: 2px solid black; position: absolute; bottom: 0; } #st2 { width: 250px; border-bottom: 2px solid black; position: absolute; bottom: 0; left: 250px; } #st3 { width: 250px; border-bottom: 2px solid black; position: absolute; bottom: 0; left: 500px; } .bt { clear: both; }