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:

<body> <div> <div> <div> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <div> <input type="text"> </div> <table> ... </table> </div> </div> <div> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body>

This is what I would like the DOM to look like after the move:

<body> <div> <div> <table> ... </table> </div> </div> <div> <div> <input type="text"> </div> <div> <select size="1" name="table1_length"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <ul> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li><a href="#">Link C</a></li> </ul> </div> </body>

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.

1

4 Answers

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");
6

Detach is unnecessary.

The answer (as of 2013) is simple: 

$('#parentNode').append($('#childNode'));

According to

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).

1

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

doesn't work for you? I think it should...

1

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');
2