Dynamically change order of elements on Html page

Is it possible to dynamically change the order  of elements on an HTML page.  In other words, using Javascript, I would like to take this:

<div id="Div1" style="background-color:#EEEEEE">Div1</div>
<div id="Div2" style="background-color:#DDDDDD">Div2</div>
<div id="Div3" style="background-color:#CCCCCC">Div3</div>

and turn it into this:

<div id="Div1" style="background-color:#EEEEEE">Div1</div>
<div id="Div3" style="background-color:#CCCCCC">Div3</div>
<div id="Div2" style="background-color:#DDDDDD">Div2</div>

Thanks in advance for the help.
pguerrantAsked:
Who is Participating?
 
MorcalavinConnect With a Mentor Commented:
You could do something like below.  This will order div 1 before div 4

<script>
function reorder() {
      div1 = document.getElementById('Div1');
      div1.parentNode.insertBefore(div1, document.getElementById('Div4'));
      
}
</script>

<body>
<input type=button value=Reorder onclick="reorder()" />
<div id="Div1" style="background-color:#EEEEEE">Div1</div>
<div id="Div2" style="background-color:#DDDDDD">Div2</div>
<div id="Div3" style="background-color:#CCCCCC">Div3</div>
<div id="Div4" style="background-color:#BBBBBB">Div4</div>
</body>
0
All Courses

From novice to tech pro — start learning today.