I'm a bit unsure of how to do this. I have a main panel where I want to display a DIV in that based on an action. I have the DIVS laid out like this in the html:

<div id="container">
   <div id="1"></div>
   <div id="2"></div>
</div>

Rather than messing around with positioning, I want to make it so that when something happens I can just put div id=2 above div id=1, as simply as possible. Any advice is appreciated.

I'm a bit unsure of how to do this. I have a main panel where I want to display a DIV in that based on an action. I have the DIVS laid out like this in the html:

<div id="container">
   <div id="1"></div>
   <div id="2"></div>
</div>

Rather than messing around with positioning, I want to make it so that when something happens I can just put div id=2 above div id=1, as simply as possible. Any advice is appreciated.

• javascript
• jquery
• css

• So when you said above did you mean the z-index, or above in sequential layout order? – Josiah Ruddell Commented Jan 10, 2011 at 17:38

3 Answers 3

In the example you are showing you can simply use the append, and prepend jquery methods.

For example, div#1 then div#2

$('#container').append('#1').append('#2');

Reorder, div#2 then div#1

$('#container #2').remove().prependTo('#container');

There are many ways you could write this. Just remember prepend places an element at the beginning (before the first element) of the container, while append places the element after the last element.

You simply do this absolute positioning the divs. If something happens, just set z-index of the elements. For example (using simple JS):

var d1 = document.getElementById('1');
var d2 = document.getElementById('2');

d1.style.zIndex = 1;
d2.style.zIndex = 2;

If you want to update them, just reset the zIndex ;)

remove the second element and reinsert it before the first element.

javascript:

var d1 = document.getElementById('1');
var d2 = document.getElementById('2');

d2.parentNode.removeChild(d2);
d1.parentNode.insertBefore(d2, d1);
​