JQuery (Javascript) / CSS, way to rearrange order of elements within DIV without using positioning?

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.

---

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);
​