15

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
  • 10,925
  • 3
  • 55
  • 73
  • 5
    *would something like this work?* did you tried something before asking? – Fabrizio Calderan Jun 22 '12 at 08:02
  • 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

27

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
  • 180,066
  • 36
  • 283
  • 292
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
  • 12,891
  • 9
  • 52
  • 70
Richard Neil Ilagan
  • 14,387
  • 5
  • 46
  • 65