Q:

Move a div with jQuery in a non-destructive manner?

Okay, so I have 3 divs...
<div id="video"></div>
<div id="info"></div>
<div id="chat"></div>

I am using jQuery to move the divs around on a button press.
$('#chat').insertBefore('#video');

There is just an issue I have with this. I believe what this function does is duplicate/clone the chat div, insert it before the video div, then destroy the original chat div. However, this doesn't work well, because as its obvious, the chat div contains a chatroom.
So the way its cloning and destroys loads up a new chat element, which not only takes up a lot of resources, but also forces the user to log back into the chatroom since its a different instance. 
Is there a way to move a div in a non-destructive manner? Without cloning and destroying? Some sort of way to physically move the div?

A:

I'm afraid it's not possible to move an IFRAME from one place in the DOM to another place without reloading it's contents. 
insertBefore has an issue with dynamic content, specially if you're about to handle IFRAMES
LIVE DEMO with chat
if you click the SWAP that will insertBefore() the iframe element  you'll notice that the iframe content gets refreshed
the same happens with your chat app (module)

