Is there a native jQuery function to switch elements? Is there a native jQuery function to switch elements? javascript javascript

Is there a native jQuery function to switch elements?


I've found an interesting way to solve this using only jQuery:

$("#element1").before($("#element2"));

or

$("#element1").after($("#element2"));

:)


Paulo's right, but I'm not sure why he's cloning the elements concerned. This isn't really necessary and will lose any references or event listeners associated with the elements and their descendants.

Here's a non-cloning version using plain DOM methods (since jQuery doesn't really have any special functions to make this particular operation easier):

function swapNodes(a, b) {    var aparent = a.parentNode;    var asibling = a.nextSibling === b ? a : a.nextSibling;    b.parentNode.insertBefore(a, b);    aparent.insertBefore(b, asibling);}


No, there isn't, but you could whip one up:

jQuery.fn.swapWith = function(to) {    return this.each(function() {        var copy_to = $(to).clone(true);        var copy_from = $(this).clone(true);        $(to).replaceWith(copy_from);        $(this).replaceWith(copy_to);    });};

Usage:

$(selector1).swapWith(selector2);

Note this only works if the selectors only match 1 element each, otherwise it could give weird results.