Solved

Dynamically change order of elements on Html page

Posted on 2006-11-20
1
2,939 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 18

Accepted Solution

by:
Morcalavin earned 50 total points
ID: 17979736
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

696 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