Solved

Dynamically change order of elements on Html page

Posted on 2006-11-20
1
2,902 Views
Last Modified: 2009-04-28
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.
0
Comment
Question by:pguerrant
1 Comment
 
LVL 18

Accepted Solution

by:
Morcalavin earned 50 total points
Comment Utility
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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now