¿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):

<div id="source">
...
</div>

dentro de esto:

<div id="destination">
...
</div>

para que yo tenga esto:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

preguntado el 14 de agosto de 09 a las 17:08

Simplemente use $ (target_element) .append (to_be_inserted_element); -

O: destination.appendChild (fuente) usando javascript simple -

¿Podemos lograr esto usando CSS? es eso posible ? -

@RajKumarSamala CSS no puede alterar la estructura del HTML, solo su presentación. -

15 Respuestas

Alguna vez probé 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>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

Respondido 23 Jul 17, 14:07

* alguien prefijo el evento global onclick del fragmento de demostración con la palabra clave var en su intento de mejorar la publicación, ¡pero eso está mal! - bekim bacaj

no es necesario usar jquery en 2017, pero a veces ayuda usar algo más liviano y similar para las tareas que se encuentran haciendo una y otra vez en cada proyecto. Yo uso cash-dom como una manera fácil de escuchar los eventos document.ready, window.load de una manera amigable para todos los navegadores. pan comido. - eballeste

Cambiando esto a la respuesta aceptada, ahora que es 2020 :) - Marcos Richman

Es sorprendente cómo la gente todavía piensa que jQuery es igual a JavaScript. Ya no es necesario jQuery en 2020, de verdad. - ii iml0sto1

Es sorprendente cómo en 2020 la gente usa toneladas de javascript cada vez más y aún se jacta de que jQuery es una biblioteca "grande" que no necesita. - Kyobul

Es posible que desee utilizar el appendTo función (que se suma al final del elemento):

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

Alternativamente, puede usar el prependTo función (que se suma 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

Respondido 26 Feb 18, 00:02

Una advertencia de que esto puede no funcionar correctamente en jQuery mobile, ya que puede crear otra copia del elemento en su lugar. - Jordán Reiter

¿El appenPara crear una copia o realmente mueve todo el div al destino? (porque si copia, crearía errores al llamar al div por el id) - user1031721

Aquí hay un excelente artículo sobre cómo eliminar, reemplazar y mover elementos en jQuery: elated.com/articles/jquery-removing-replaceing-moving-elements - xhh

Tenga en cuenta que la documentación de jQuery para appendTo indica que el elemento se mueve: it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned - api.jquery.com/appendto - John K

No lo estás moviendo, solo agregando. A continuación, la respuesta hace un MOVIMIENTO adecuado. - Aaron

mi solución:

MOVERSE:

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

COPIAR:

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

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

Respondido 22 Oct 15, 10:10

La mejor respuesta. La respuesta aceptada crea una copia, no mueve el elemento como pide la pregunta. - paulscode

Lo siento, pero la respuesta aceptada de Andrew Hare es correcta: la separación es innecesaria. Pruébelo en JSFiddle de Pixic anterior: si elimina las llamadas de separación, funciona exactamente igual, es decir, hace un movimiento, NO una copia. Aquí está la bifurcación con solo ese cambio: jsfiddle.net/D46y5 Como se documenta en la API: api.jquery.com/appendTo : "Si un elemento seleccionado de esta manera se inserta en una única ubicación en otra parte del DOM, se moverá al destino (no se clonará) y se devolverá un nuevo conjunto que consta del elemento insertado" - John - No es un número

@ John-NotANumber es correcto - no se necesita detach () aquí. La respuesta aceptada ES la mejor, solo necesita leer la documentación correctamente. - LeonardChallis

La documentación de appendTo también dice: "Sin embargo, si hay más de un elemento de destino, se crearán copias clonadas del elemento insertado para cada destino después del primero, y se devolverá ese nuevo conjunto (el elemento original más los clones)". Entonces, en el caso general, ¡esta solución también PUEDE crear copias! - Vicente Pazeller

¡estupendo! O puede usar esto para ser más específico sobre dónde moverse $('#nodeToMove').insertAfter('#insertAfterThisElement'); - Victor Augusto

Acabo de usar:

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

De la que me agarré aquí.

Respondido 24 Jul 15, 15:07

Bueno, desconectar es útil cuando desea retener el elemento y volver a insertarlo más adelante, pero en su ejemplo, lo reintroduce instantáneamente de todos modos. - Tim Büthe

Me temo que no estoy asimilando lo que está diciendo, ¿podría proporcionar un código de muestra? - kjc26ster

Quiero decir, prependTo, separa el elemento de su posición original y lo inserta en la nueva. La función de separación, por otro lado, simplemente separa el elemento seleccionado y puede guardarlo en una variable para insertarlo en el DOM en un momento posterior. La cuestión es que su llamada de separación es innecesaria. Retíralo y conseguirás el mismo efecto. - Tim Büthe

Increíble que las ediciones cambiaron esta respuesta por completo hasta el punto de que se agregó otra respuesta un año después (idéntica a la original) y obtuvieron más de 800 votos a favor ... - hlscalon

sí, ¡pero ese estaba mal! y esta respuesta no recibe los votos a favor porque prependTo no es específicamente lo que pidió el OP, mientras que la respuesta más votada es. detach simplemente no es necesario para la pregunta tal como se formuló. - Auspex

Que tal un JavaScript solución?

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

Compruébelo usted mismo.

Respondido 26 Abr '20, 06:04

¿Por qué usar createDocumentFragment en lugar de simplemente document.getElementById ('destino'). AppendChild (document.getElementById ('fuente'))? - Gunar Gessner

@ GunarC.Gessner asumiendo que necesita modificar el objeto de origen antes de agregarlo al objeto de destino, entonces el mejor enfoque es usar el fragmento que es un objeto imaginario y no es parte del árbol DOM, obtiene un mejor rendimiento al modificar el objeto de origen cuando se ha realizado la transición de su lugar original (ahora está dentro del fragmento) en lugar de modificarlo en su lugar inicial antes de agregarlo. - ali bassam

Quiero agregar por la relevancia de ofrecer una solución pura de JavaScript. No se debe suponer que jQuery siempre se está usando - Alejandro Fradiani

Pregunta: Al agregar el nodo hijo, ¿estamos perdiendo los eventos adjuntos? - jimasun

La respuesta a mi propia pregunta es sí, mantiene los eventos adjuntos. - jimasun

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

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

Si div donde desea colocar su elemento tiene contenido adentro, y desea mostrar el elemento antes el contenido principal:

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

Si div donde quieres poner tu elemento está vacío, o quieres reemplazar es completamente:

$("#element").html('<div id="source">...</div>');

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

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

Respondido el 23 de junio de 16 a las 00:06

Me resulta un poco difícil leer toda la negrita, pero esta es la respuesta más informativa, por lo que recibe mi voto a favor. - Michael Scheper

Puedes usar:

Para insertar después,

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

Para insertar dentro de otro elemento,

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

Respondido el 24 de junio de 13 a las 12:06

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

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


A continuación, se muestra un breve ejemplo:

Para moverse POR ENCIMA de un elemento:

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

Para moverse DESPUÉS de un elemento:

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

Para moverse dentro de un elemento, SOBRE 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');

Respondido 17 Feb 15, 22:02

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

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

intenta trabajar 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>

respondido 02 nov., 15:08

Pregunta anterior, pero llegué aquí 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 estándar DOM appendChild sí.

//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 el .source y lo coloca en el destino, incluidos sus oyentes de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Respondido el 24 de diciembre de 14 a las 04:12

También puedes probar:

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

Pero esto sobrescribirá completamente todo lo que tenga en #destination.

Respondido 24 Jul 15, 15:07

Y rompa los oyentes de eventos en el elemento movido. - Igor Pomaransky

Noté una gran pérdida de memoria y una diferencia de rendimiento entre insertAfter & after or insertBefore & before .. Si tiene toneladas de elementos DOM, o necesita usar after() or before() dentro de una Evento MouseMove, la memoria del navegador probablemente aumentará y las próximas operaciones serán muy lentas.

La solución que acabo de experimentar es usar inserBefore en su lugar before() e insertAfter en su lugar after().

Respondido 03 Oct 19, 11:10

Esto suena como un problema que depende de la implementación del motor de JavaScript. ¿Con qué versión de navegador y motor JS ves esto? - Marcos Richman

Estoy en la versión 36.0.1985.125 de Chrome y uso jQuery v1.11.1. Ato una función en el evento mousemove, que mueve un DIV simple hacia abajo o hacia arriba el elemento sobre el que está el mouse. Por lo tanto, este evento y función se ejecuta mientras arrastra el cursor. La pérdida de memoria ocurre con after () y before (), si mueve el cursor durante 30 segundos +, y desaparece si solo uso insertAfter & insertBefore en su lugar. - spetsnaz

Abriría un error con Google en ese. - Marcos Richman

Puede usar JavaScript puro, usando appendChild() método...

El método appendChild () agrega un nodo como el último hijo de un nodo.

Sugerencia: Si desea crear un nuevo párrafo, con texto, recuerde crear el texto como un nodo Texto que agregará al párrafo y luego agregue el párrafo al documento.

También puede utilizar este método para mover un elemento de un elemento a otro.

Consejo: utilice el método insertBefore () para insertar un nuevo nodo hijo antes de un nodo hijo existente especificado.

Entonces puedes hacer eso para hacer el trabajo, esto es lo que creé para ti, usando appendChild(), ejecute y vea cómo funciona para su caso:

function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}
#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}
<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

<button onclick="appendIt()">Move Element</button>

Respondido el 19 de enero de 19 a las 01:01

En aras de la integridad, hay otro enfoque wrap() or wrapAll() mencionado en este artículo. Entonces, la pregunta del OP posiblemente podría resolverse con esto (es decir, asumiendo el <div id="destination" /> aún no existe, el siguiente enfoque creará dicho contenedor desde cero; el OP no tenía claro si el contenedor ya existe o no):

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

Suena prometedor. Sin embargo, cuando estaba tratando de hacer $("[id^=row]").wrapAll("<fieldset></fieldset>") en múltiples estructuras anidadas como esta:

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

Envuelve correctamente esos <div>...</div> y <input>...</input> PERO ALGUNOS DEJAN FUERA <label>...</label>. Así que terminé usando el explícito $("row1").append("#a_predefined_fieldset") en lugar de. Entonces, YMMV.

Respondido el 04 de Septiembre de 18 a las 08:09

mejora de tamaño sucio de Bekim Bacaj respuesta

div { border: 1px solid ; margin: 5px }
<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>

Respondido el 05 de junio de 20 a las 21:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.