Cómo mover elementos secundarios de un padre a otro usando jQuery

Estoy usando el complemento jQuery DataTables . Me gustaría mover el cuadro de búsqueda (.dataTables_filter) y el número de registros para mostrar el menú desplegable (.dataTables_length) de su elemento principal (.dataTables_wrapper) a otro div en mi página sin perder ningún comportamiento javascript registrado. Por ejemplo, el cuadro de búsqueda tiene una función asociada al evento ‘keyup’ y quiero mantenerlo intacto.

El DOM se ve así:

 
10 25 50 100
...

Esto es lo que me gustaría que fuera el DOM después de la mudanza:

  
...
10 25 50 100

He estado mirando las funciones .append (), .appendTo (), .prepend () y .prependTo () pero no he tenido suerte con esto en la práctica. También miré las funciones .parent () y .parents (), pero parece que no puedo codificar una solución viable. También consideré cambiar el CSS para que los elementos estén absolutamente posicionados, pero para ser sincero, la página está configurada con elementos fluidos por todas partes, y realmente quiero que estos elementos floten en sus nuevos padres.

Cualquier ayuda con esto es muy apreciada.

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

no funciona para ti? Creo que debería …

Como la respuesta de Jage elimina por completo el elemento, incluidos los manejadores de eventos y los datos, agrego una solución simple que no lo hace, gracias a la función de detach .

 var element = $('#childNode').detach(); $('#parentNode').append(element); 

Editar:

Igor Mukhin sugirió una versión aún más corta en los comentarios a continuación:

$("#childNode").detach().appendTo("#parentNode");

Detach es innecesario.

La respuesta (a partir de 2013) es simple:

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

De acuerdo con http://api.jquery.com/append/

También puede seleccionar un elemento en la página e insertarlo en otro:

$ (‘. container’). append ($ (‘h2’));

Si un elemento seleccionado de esta manera se inserta en una única ubicación en cualquier parte del DOM, se moverá al objective (no clonado).

En función de las respuestas proporcionadas, decidí hacer un complemento rápido para hacer esto:

 (function($){ $.fn.moveTo = function(selector){ return this.each(function(){ var cl = $(this).clone(); $(cl).appendTo(selector); $(this).remove(); }); }; })(jQuery); 

Uso:

 $('#nodeToMove').moveTo('#newParent'); 

Prueba esto:

 var kids = $('#table1_wrapper').children(); $.each(kids, function(){ $('#table1_wrapper').remove($(this)); $('#anotherdiv').append($(this)); });