How to move <div id="mbr_img"> above <div id="mbr_music"> in pure javascript?

Question

<div>
<div id="mbr_music" class="mb"></div>
<div id="mbr_img"></div>
</div>

I'm doing it this way:

var oDivMusic = document.getElementById("mbr_music");
var oDivImg = document.getElementById("mbr_img");

oDivImg.parentNode.removeChild(oDivImg);
document.body.insertBefore(oDivImg, oDivMusic);

Which is not working,how to do it correctly?

Answer 1

You can't. Pure JavaScript has no way to move elements about the page, you have to interface with the DOM API.

document.body.insertBefore(oDivImg, oDivMusic); isn't working because document.body is not the parent element of oDivMusic.

var oDivMusic = document.getElementById("mbr_music");
var oDivImg = document.getElementById("mbr_img");
oDivMusic.parentNode.insertBefore(oDivImg, oDivMusic);