JS操作DIV位置

Question

有这样一个布局：
<div>
<div id="mbr_music" class="mb"></div>
<div id="mbr_img"></div>
</div>
我想把mbr_img移到mbr_music上面去
写了段JS：
var oDivMusic = document.getElementById("mbr_music");
var oDivImg = document.getElementById("mbr_img");oDivImg.parentNode.removeChild(oDivImg);
document.body.insertBefore(oDivImg, oDivMusic);为什么不起作用。

Answer 1

这样试试 <div id="box">
<div id="mbr_music" class="mb"></div>
<div id="mbr_img"></div>
</div>
var oDivMusic = document.getElementById("mbr_music");
var oDivImg = document.getElementById("mbr_img");
document.getElementById("box").insertBefore(oDivImg,OdivMusic);

Answer 2

可以直接<div>
<div id="mbr_music" class="mb"></div>
<div id="mbr_img"></div>
</div>
<script type="text/javascript">
var oDivMusic = document.getElementById("mbr_music");
var oDivImg = document.getElementById("mbr_img");
oDivImg.parentNode.insertBefore(oDivImg,oDivMusic);
</script>

Answer 3

insertBefore只能操作往它里面插入节点，所以不能直接用document.body
另外你的oDivImg已经从文档中移除了，不能再操作了

Answer 4

2楼的方法完全可行.<div>
<div id="mbr_music" class="mb">music</div>
<div id="mbr_img">img</div>
</div>
<script type="text/javascript">
function changePosition(){
var oDivMusic = document.getElementById("mbr_music");
var oDivImg = document.getElementById("mbr_img");
oDivImg.parentNode.insertBefore(oDivImg,oDivMusic);
}
</script>
<input type = "button" value = "click"  onclick="changePosition()"/>