¿Cómo mover un elemento dentro de otro elemento?

Me gustaría mover un elemento DIV dentro de otro. Por ejemplo, quiero mover esto (incluyendo todos los hijos):

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

dentro de esto:

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

para que tenga esto:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Pregunta editada 17º septiembre 2014 в 3:45
Programación
javascript html jquery
14º agosto 2009 в 8:14
95 vistas
Solución

Puede utilizar la función appendTo (que añade al final del elemento):

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

También puede utilizar la función prependTo (que añade al principio 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>

appendTo main
prependTo main
Clonkex
Respuesta editada 26º febrero 2018 в 12:32
Comentarios (15)

Acabo de usar:

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

Que he cogido de aquí.

Cᴏʀʏ
Respuesta editada 24º julio 2015 в 2:55
Comentarios (4)

Si el div donde quieres poner tu elemento tiene contenido dentro, y quieres que el elemento se muestre después del contenido principal:

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

Si el div donde quieres poner tu elemento tiene contenido dentro, y quieres que el elemento se muestre antes del contenido principal:

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

Si el div donde quieres poner tu elemento está vacío, o quieres reemplazarlo por completo:

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

Si quieres duplicar un elemento antes de cualquiera de los anteriores

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Respuesta editada 22º junio 2016 в 11:05
Comentarios (1)