Pregunta ¿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 tenga esto:

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

1427
2017-08-14 20:14


origen


Respuestas:


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

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

Alternativamente, podrías usar el prependTo función (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;
}
<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>


1576
2017-08-14 20:16



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.


779
2017-11-06 01:50



Acabo de usar:

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

De lo cual tomé aquí.


104
2017-07-24 18:51



Si el div donde quiere poner su elemento tiene contenido adentro, y quiere que el elemento se muestre después el contenido principal:

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

Si el div donde quiere poner su elemento tiene contenido adentro, y quiere mostrar el elemento antes de el contenido principal:

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

Si el div donde quiere poner su elemento está vacío, o quiere reemplazar completamente:

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

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

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

81
2017-11-15 20:04



Que tal un JavaScript ¿solución?

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.


65
2018-06-24 10:43



Puedes usar:

Para insertar después,

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

Para insertar dentro de otro elemento,

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

27
2018-05-02 13:53



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>


18
2017-11-02 08:49



Puede usar el siguiente código para mover la fuente a 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>


16
2018-02-17 22:03



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

15
2017-12-24 04:06



Una vieja pregunta, pero llegó aquí porque necesito mover el contenido de un contenedor a otro incluyendo todos los oyentes del evento.

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


10
2017-12-05 12:40