Swap two html elements and preserve event listeners on them

Question

There are similar questions, but all the answers are for swapping html elements only for the content inside.

I need to swap two divs, with lots of content in them (tables, select boxes, inputs, etc.). The elements have event listeners on them, so I need to preserve them after swapping the main divs.

I have access to jQuery 1.5. So answers with it are OK.

Answer 1

To swap two divs without losing event handlers or breaking DOM references, you can just move them in the DOM. The key is NOT to change the innerHTML because that recreates new DOM nodes from scratch and all prior event handlers on those DOM objects are lost.

But, if you just move the DOM elements to a new place in the DOM, all events stay attached because the DOM elements are only reparented without changing the DOM elements themselves.

Here's a quick function that would swap two elements in the DOM. It should work with any two elements as long as one is not a child of the other:

function swapElements(obj1, obj2) {     // create marker element and insert it where obj1 is     var temp = document.createElement("div");     obj1.parentNode.insertBefore(temp, obj1);      // move obj1 to right before obj2     obj2.parentNode.insertBefore(obj1, obj2);      // move obj2 to right before where obj1 used to be     temp.parentNode.insertBefore(obj2, temp);      // remove temporary marker node     temp.parentNode.removeChild(temp); } 

You can see it work here: http://jsfiddle.net/jfriend00/NThjN/

---

And here's a version that works without the temporary element inserted:

function swapElements(obj1, obj2) {     // save the location of obj2     var parent2 = obj2.parentNode;     var next2 = obj2.nextSibling;     // special case for obj1 is the next sibling of obj2     if (next2 === obj1) {         // just put obj1 before obj2         parent2.insertBefore(obj1, obj2);     } else {         // insert obj2 right before obj1         obj1.parentNode.insertBefore(obj2, obj1);          // now insert obj1 where obj2 was         if (next2) {             // if there was an element after obj2, then insert obj1 right before that             parent2.insertBefore(obj1, next2);         } else {             // otherwise, just append as last child             parent2.appendChild(obj1);         }     } } 

Working demo: http://jsfiddle.net/jfriend00/oq92jqrb/