Como mover um elemento para outro elemento?

Eu gostaria de mover um elemento DIV dentro de outro. Por exemplo, eu quero mover este (incluindo todas as crianças):

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

nisto:

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

para que eu tenha isto:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Pergunta editada :em
Programação
javascript html jquery
14º agosto 2009 в 8:14
94 vistas
Solução

Você pode querer utilizar a função `appendTo' (que adiciona ao fim do elemento):

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

Alternativamente, você poderia utilizar a função `prependTo' (que adiciona ao início do elemento):

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

Exemplo:

$("#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
Resposta editada :em
Comentários (15)

Eu acabei de usar:

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

Que eu peguei aqui.

Cᴏʀʏ
Resposta editada :em
Comentários (4)

Se o div onde você quer colocar seu elemento tem conteúdo dentro, e você quer que o elemento mostre após o conteúdo principal:

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

Se o div onde você quer colocar seu elemento tem conteúdo dentro, e você quer mostrar o elemento antes do conteúdo principal:

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

Se o div onde você quer colocar seu elemento está vazio, ou você quer substituí-lo totalmente:

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

Se você quiser duplicar um elemento antes de qualquer um dos itens acima:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Resposta editada :em
Comentários (1)