16

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.

Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
  • i simplified things in the question, i need to modify multiple functions in order to get it to work with it, what i want to know is does append move the div into the other one? – Patsy Issa Jun 22 '12 at 08:04
  • but I don't think this works. You'll probably have to pull it out of the DOM, and reinject it. – 11684 Jun 22 '12 at 08:06

2 Answers2

28

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
});
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
4

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);
});
Dmitry Pashkevich
  • 13,431
  • 9
  • 55
  • 73
Richard Neil Ilagan
  • 14,627
  • 5
  • 48
  • 66