CODEWITHSUNDEEP
jqueryappend
Patsy Issa
Patsy Issa

Reputation: 11293

Can i append an already existing div to another already existing div?

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.

Upvotes: 16

Views: 61881

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206189

Using .appendTo()

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

Using .append()

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

Upvotes: 28

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

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);
});

Upvotes: 4

Related Questions