Can i append an already existing div to another al

Question

I have a contact form in a div on it's own with opacity 0, and a div where content is dynamically manipulated depending on what the user click on the menu. After the user gets to the last stage of the menu i need to clear the content of the div that displays everything and then "move" the form div into it, would something like this work?

$('#menu_form').on('click', function() {
    $('#form_div').append('#display_div');
});

So to recap 2 already existing divs, need to place one of them into the other on click.

Answer 1

You can use: .appendTo() method:

$('#menu_form').on('click', function(){
   $('#form_div').appendTo('#display_div');  // appendTo -> selector
});

or you can use .append()method:

$('#menu_form').on('click', function(){
   $('#display_div').append( $('#form_div') ); // append -> object
});

Answer 2

Check this jsFiddle for a quick POC. Apparently it does.

The trick is to pass the object reference, not just the object id, like so:

$('#menu_form').on('click', function(){
    $('#form_div').append($('#display_div'));
});

You could also pass the current object, using this:

$('#menu_form').on('click', function(){
    $('#form_div').append(this);
});