Como mover um elemento para outro elemento?

A minha solução:

Mexe-te:

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

Cópia:

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

Note o uso de .desanexar(). Ao copiar, tenha cuidado para que você não esteja duplicando IDs.

Acabei de usar:

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

Que eu agarreiaqui .

Se o div onde você quer colocar o seu elemento tem conteúdo dentro, e você quer que o elemento mostre Depois de {[10] } o conteúdo principal:

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

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

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

Se o div onde quer colocar o seu elemento estiver vazio, ou se quiser substituir {[10] } completamente:

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

Se quiser duplicar um elemento antes qualquer uma das situações acima referidas:

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

E que tal uma solução JavaScript?

Declare um fragmento:

var fragment = document.createDocumentFragment();

Adicione o elemento desejado ao fragmento:

fragment.appendChild(document.getElementById('source'));

Adicione o fragmento ao elemento desejado:

document.getElementById('destination').appendChild(fragment);

Olha só.

Pode usar:

Para Inserir Depois,

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

Para inserir dentro de outro elemento,

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

Pode usar o seguinte código para mover a fonte para o destino

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

Tenta 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>

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

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

Aqui está um pequeno exemplo:

Mover-se acima de um elemento:

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

Mover-se depois de um elemento:

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

Mover-se dentro de um elemento, acima de todos os elementos dentro desse recipiente:

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

Mover-se dentro de um elemento, depois de todos os elementos dentro desse recipiente:

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

Pergunta antiga, mas cheguei aqui porque preciso de mover o conteúdo de um contentor para outro incluindo todos os ouvintes de Eventos.

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

Se usar o appendChild remove o .fonte e coloca-a no alvo, incluindo os seus ouvintes de Eventos: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Também pode tentar:

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

Mas isto irá substituir completamente tudo o que tiver em #destination.

Notei uma enorme fuga de memória e diferença de desempenho entre o seguinte e depois ou o seguinte antes e antes .. Se você tem toneladas de elementos DOM, ou você precisa usar depois() ou antes() dentro de um evento MouseMove, a memória do navegador provavelmente irá aumentar e as próximas operações serão muito lentas. A solução que acabei de experimentar é usar inserBefore instead before () e insertAfter instead after ().

Por uma questão de exaustividade, existe outra abordagem wrap() ou wrapAll() mencionada em Este artigo. Então a questão do OP poderia possivelmente ser resolvida por isso (isto é, assumindo que o <div id="destination" /> ainda não existe, a seguinte abordagem irá criar tal Invólucro a partir do zero - o OP não estava claro se o invólucro já existe ou não):

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

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

Envolve correctamente aqueles <div>...</div> e <input>...</input> mas de alguma forma deixa de fora o <label>...</label>. Então acabei por usar o explícito $("row1").append("#a_predefined_fieldset") em vez disso. Então, MMMV.