How to move child element from one parent to another using jQuery

Question

I am using the jQuery DataTables plugin  I would like to move the search box   dataTables filter  and number of records to display dropdown   dataTables length  from their parent element   dataTables wrapper  to another div on my page without losing any registered javascript behavior  For instance the search box has a function attached to the  keyup  event and I want to keep that intact   The DOM looks like this    lt body gt   lt div id  parent1  gt     lt div class  dataTables wrapper  id  table1 wrapper  gt       lt div class  dataTables length  id  table1 length  gt         lt select size  1  name  table1 length  gt           lt option value  10  gt 10 lt  option gt           lt option value  25  gt 25 lt  option gt           lt option value  50  gt 50 lt  option gt           lt option value  100  gt 100 lt  option gt         lt  select gt       lt  div gt       lt div class  dataTables filter  id  table1 filter  gt         lt input type  text  class  search  gt       lt  div gt       lt table id  table1  gt               lt  table gt     lt  div gt   lt  div gt   lt div id  parent2  gt     lt ul gt       lt li gt  lt a href     gt Link A lt  a gt  lt  li gt       lt li gt  lt a href     gt Link B lt  a gt  lt  li gt       lt li gt  lt a href     gt Link C lt  a gt  lt  li gt     lt  ul gt   lt  div gt   lt  body gt    This is what I would like the DOM to look like after the move    lt body gt   lt div id  parent1  gt     lt div class  dataTables wrapper  id  table1 wrapper  gt       lt table id  table1  gt               lt  table gt     lt  div gt   lt  div gt   lt div id  parent2  gt     lt div class  dataTables filter  id  table1 filter  gt       lt input type  text  class  search  gt     lt  div gt     lt div class  dataTables length  id  table1 length  gt       lt select size  1  name  table1 length  gt         lt option value  10  gt 10 lt  option gt         lt option value  25  gt 25 lt  option gt         lt option value  50  gt 50 lt  option gt         lt option value  100  gt 100 lt  option gt       lt  select gt     lt  div gt     lt ul gt       lt li gt  lt a href     gt Link A lt  a gt  lt  li gt       lt li gt  lt a href     gt Link B lt  a gt  lt  li gt       lt li gt  lt a href     gt Link C lt  a gt  lt  li gt     lt  ul gt   lt  div gt   lt  body gt    I ve been looking at the  append     appendTo     prepend   and  prependTo   functions but haven t had any luck with these in practice  I ve also looked at the  parent   and  parents   functions  but can t seem to code a workable solution  I have also considered changing the CSS so that the elements are absolutely positioned - but to be frank the page is setup with fluid elements all over  and I really want these elements to be floated in their new parents   Any help with this is much appreciated

User · Answer

Detach is unnecessary   The answer  as of 2013  is simple        parentNode   append     childNode       According to http   api jquery com append       You can also select an element on the page and insert it into another           container   append    h2          If an element selected this way is inserted into a single location   elsewhere in the DOM  it will be moved into the target  not cloned

User · Answer

Based on the answers provided  I decided to make a quick plugin to do this     function           fn moveTo   function selector           return this each function                var cl     this  clone                  cl  appendTo selector                 this  remove                          jQuery     Usage       nodeToMove   moveTo   newParent

User · Answer

parent2   prepend     table1 length    prepend     table1 filter      doesn t work for you  I think it should

User · Answer

As Jage s answer removes the element completely  including event handlers and data  I m adding a simple solution that doesn t do that  thanks to the detach function   var element       childNode   detach        parentNode   append element     Edit   Igor Mukhin suggested an even shorter version in the comments below       childNode   detach   appendTo   parentNode

[jquery] How to move child element from one parent to another using jQuery

Examples related to jquery

Examples related to jquery-plugins