How to swap position of HTML tags?

Question

If I have the HTML:

<div id="divOne">Hello</div> <div id="divTwo">World</div>

Is it possible with CSS/JS/jQuery to swap it around so the contents of divTwo appears in the position of divOne and vice-versa ? I'm just looking to change the position of each div, so I don't want any solution that involves setting/swapping the HTML of each.

The idea is to let a user customise the order content appears on the page. Is what I'm trying to do a good way of going about that, or is there a better way of achieving it ?

Answer 1

You'll be relieved to know it's not hard at all using jQuery.

$("#divOne").before($("#divTwo"));

Edit: If you're talking about implementing drag-and-drop functionality for ordering the divs, take a look at jQuery UI's sortable plugin... http://jqueryui.com/demos/sortable/

Answer 2

Perhaps by using floats.

#divOne {
   float: right;
}

#divTwo {
   float: left;
}

YMMV.