Como mover um elemento para outro elemento?

Eu gostaria de mover um elemento DIV para dentro de outro. Por exemplo, eu quero mover isso (incluindo todos os filhos):

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

nisso:

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

para que eu tenha isso:

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

Já tentou JavaScript simples ... 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>

Você pode querer usar a appendTofunção (que adiciona ao final do elemento):

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

Como alternativa, você pode usar a prependTofunção (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>

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

minha solução:

MOVER:

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

CÓPIA DE:

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

Observe o uso de .detach (). Ao copiar, tenha cuidado para não duplicar IDs.

Eu apenas usei:

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

Que eu peguei daqui .

Que tal uma solução JavaScript ?

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

Confira.

Se o divlocal em que você deseja colocar seu elemento possui conteúdo e você deseja que o elemento seja exibido após o conteúdo principal:

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

Se o divlocal em que você deseja colocar seu elemento possui conteúdo e você deseja mostrar o elemento antes do conteúdo principal:

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

Se o divlocal em que você deseja colocar seu elemento estiver vazio, ou você desejar substituí- lo totalmente:

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

Se você deseja duplicar um elemento antes de qualquer uma das opções acima:

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

Você pode usar:

Para inserir depois,

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

Para inserir dentro de outro elemento,

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

Se você quiser uma demonstração rápida e mais detalhes sobre como mover elementos, tente este link:

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

Aqui está um pequeno exemplo:

Para mover ACIMA de um elemento:

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

Para mover APÓS um elemento:

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

Para mover-se dentro de um elemento, ACIMA DE TODOS os elementos dentro desse contêiner:

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

Para mover-se dentro de um elemento, APÓS TODOS os elementos dentro desse contêiner:

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

Você pode usar o seguinte código para mover a origem para o destino

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

tente trabalhar 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>

Pergunta antiga, mas cheguei aqui porque preciso mover o conteúdo de um contêiner para outro, incluindo todos os ouvintes do evento .

O jQuery não tem como fazê-lo, mas a função DOM padrão appendChild possui.

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

O uso de appendChild remove o .source e o coloca no destino, incluindo seus ouvintes de eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Você também pode tentar:

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

Mas isso substituirá completamente tudo o que você possui #destination.

Percebi uma grande perda de memória e diferença de desempenho entre insertAfter& afterou insertBefore& before.. Se você possui vários elementos DOM ou precisa usar after()ou before()dentro de um evento MouseMove , a memória do navegador provavelmente aumentará e as próximas operações serão muito lentas.

A solução que acabei de experimentar é usar o insertBefore before()e depois o insertAfter after().

Você pode usar JavaScript puro, usando o appendChild()método ...

O método appendChild () anexa um nó como o último filho de um nó.

Dica: Se você deseja criar um novo parágrafo, com texto, lembre-se de criar o texto como um nó Texto que você anexa ao parágrafo e, em seguida, anexa o parágrafo ao documento.

Você também pode usar esse método para mover um elemento de um elemento para outro.

Dica: Use o método insertBefore () para inserir um novo nó filho antes de um nó filho especificado e existente.

Para que você possa fazer isso, é isso que eu criei para você, usando appendChild(), execute e veja como funciona no seu 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>

Por uma questão de integridade, há outra abordagem wrap()ou wrapAll()mencionada neste artigo . Portanto, a questão do OP poderia ser resolvida com isso (ou seja, assumindo <div id="destination" />que ainda não exista, a seguinte abordagem criará esse invólucro do zero - o OP não ficou claro se o invólucro já existe ou não):

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

Parece promissor. No entanto, quando eu estava tentando fazer $("[id^=row]").wrapAll("<fieldset></fieldset>")em várias estruturas aninhadas como esta:

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

Ela envolve corretamente os <div>...</div>e <input>...</input>mas de alguma forma deixa de fora a <label>...</label>. Então acabei usando o explícito $("row1").append("#a_predefined_fieldset"). Então, YMMV.

melhoria de tamanho sujo da resposta de Bekim Bacaj

div { border: 1px solid ; margin: 5px }

<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>