¿Cómo mover un elemento a otro elemento?

Me gustaría mover un elemento DIV dentro de otro. Por ejemplo, quiero mover esto (incluidos todos los niños):

...

dentro de esto:

 
...

para que tenga esto:

 
...

Solutions Collecting From Web of "¿Cómo mover un elemento a otro elemento?"

Puede usar la función appendTo (que se agrega al final del elemento):

 $("#source").appendTo("#destination"); 

Alternativamente, puede usar la función prependTo (que se agrega al comienzo del elemento):

 $("#source").prependTo("#destination"); 

Ejemplo:

 $("#appendTo").click(function() { $("#moveMeIntoMain").appendTo($("#main")); }); $("#prependTo").click(function() { $("#moveMeIntoMain").prependTo($("#main")); }); 
 #main { border: 2px solid blue; min-height: 100px; } .moveMeIntoMain { border: 1px solid red; } 
  
main
move me to main

mi solución:

MOVIMIENTO:

 jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode') 

DUPDO:

 jQuery("#NodesToMove").appendTo('#DestinationContainerNode') 

Tenga en cuenta el uso de .detach (). Al copiar, tenga cuidado de no estar duplicando los ID.

Acabo de usar:

 $('#source').prependTo('#destination'); 

Que agarré de aquí .

Si el div donde desea colocar su elemento tiene contenido dentro, y desea que el elemento se muestre después del contenido principal:

  $("#destination").append($("#source")); 

Si el div donde desea poner su elemento tiene contenido dentro, y desea mostrar el elemento antes del contenido principal:

 $("#destination").prepend($("#source")); 

Si el div donde desea colocar su elemento está vacío, o si desea reemplazarlo por completo:

 $("#element").html('
...
');

Si desea duplicar un elemento antes de cualquiera de los anteriores:

 $("#destination").append($("#source").clone()); // etc. 

¿Qué pasa con una solución de JavaScript ?

Declara un fragmento:

var fragment = document.createDocumentFragment();

Añada el elemento deseado al fragmento:

fragment.appendChild(document.getElementById('source'));

Añadir fragmento al elemento deseado:

document.getElementById('destination').appendChild(fragment);

Echale un vistazo.

Puedes usar:

Para insertar después,

 jQuery("#source").insertAfter("#destination"); 

Para insertar dentro de otro elemento,

 jQuery("#source").appendTo("#destination"); 

Alguna vez probé con JavaScript simple … destination.appendChild(source); ?

 onclick = function(){ destination.appendChild(source); } 
 div{ margin: .1em; } #destination{ border: solid 1px red; } #source {border: solid 1px gray; } 
 < !DOCTYPE html>   
###
***

Puede usar el siguiente código para mover la fuente a destino

  jQuery("#source") .detach() .appendTo('#destination'); 

intente trabajar en el codepen

 function move() { jQuery("#source") .detach() .appendTo('#destination'); } 
 #source{ background-color:red; color: #ffffff; display:inline-block; padding:35px; } #destination{ background-color:blue; color: #ffffff; display:inline-block; padding:50px; } 
  
I am source
I am destination

Si desea una demostración rápida y más detalles sobre cómo mover elementos, intente este enlace:

http://html-tuts.com/move-div-in-another-div-with-jquery


Aquí hay un pequeño ejemplo:

Para mover ARRIBA un elemento:

 $('.whatToMove').insertBefore('.whereToMove'); 

Para moverse DESPUÉS de un elemento:

 $('.whatToMove').insertAfter('.whereToMove'); 

Para moverse dentro de un elemento, ARRIBA TODOS los elementos dentro de ese contenedor:

 $('.whatToMove').prependTo('.whereToMove'); 

Para moverse dentro de un elemento, DESPUÉS DE TODOS los elementos dentro de ese contenedor:

 $('.whatToMove').appendTo('.whereToMove'); 

La pregunta anterior llegó porque necesito mover contenido de un contenedor a otro, incluidos todos los oyentes de eventos .

jQuery no tiene una forma de hacerlo, pero la función DOM estándar appendChild sí lo hace.

 //assuming only one .source and one .target $('.source').on('click',function(){console.log('I am clicked');}); $('.target')[0].appendChild($('.source')[0]); 

El uso de appendChild elimina .source y lo coloca en el destino, incluidos sus oyentes de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

También puedes probar:

 $("#destination").html($("#source")) 

Pero esto sobrescribirá completamente cualquier cosa que tengas en #destination .

Noté una gran pérdida de memoria y diferencia de rendimiento entre InsertAfter & After o InsertAfter & Before. Si tiene toneladas de elementos DOM, o necesita usar after () o before () dentro de un evento MouseMove, la memoria del navegador probablemente boostá y las próximas operaciones se ejecutarán realmente despacio. La solución que acabo de experimentar es utilizar inserBefore en lugar de before () e insertAfter instead after ().