Question

I have a div on my page that acts as a shell to store other divs. The page loads and the shell is hidden & empty.
On a jQuery event I show the shell and fill it with the triggered div.
More often than not, the triggered div happens to be a form.

if I do this:

$('#lb_content').html($('#' + div_id).html());

that duplicates the form and makes validation/submit difficult – right?

---

my work around is to store an global variable:

var container_emptied = '';

so when I show the shell I do this:

var content = $('#' + div_id).html();
container_emptied = '#' + div_id;
$(container_emptied).empty();
$('#lb_content').html(content);

and when I hide the shell I do this:

$(container_emptied).html($('#lb_content').html());
$('#lb_content').empty();

am I over complicating this?

Answer 1

So it seems like you’re just moving the form content from one location to another. Is that right?

If so, just use .appendTo() like this:

    // Move all the content to new location
$('#' + div_id).contents().appendTo('#lb_content');

and do the opposite to move it back:

    // Move all the content back
$('#lb_content').contents().appendTo('#' + div_id);

(I assume you were only interested in the content, and not the element itself.)

EDIT: Reversed the two. Had them backward the first time.

• http://api.jquery.com/appendTo/
• http://api.jquery.com/contents/