Question

Let’s say I have two <div> elements in the DOM. I can easily switch their markup between them with jQuery, like so:

function switch_html(el1, el2){
        var el1_content = el1.html();
        var el2_content = el2.html();
        el1.html(el2_content);
        el2.html(el1_content);
}

However, how do I actually switch the DOM elements, and not just copy & switch the HTML source? For example, in the app I am currently developing, I am swapping out <div> contents that include filled out <input> fields. If the source HTML of these fields is merely copied, then the values contained within the inputs will be lost.

Answer 1

You can move the actual DOM nodes using jQuery append / element.appendChild. Move the actual DOM nodes, don’t try to make copies/clones.

Try this:

var children1 = $('#el1').children();
var children2 = $('#el2').children();

$('#el1').append(children2);
$('#el2').append(children1);