Come spostare un elemento in un altro elemento?

Vorrei spostare un elemento DIV all'interno di un altro. Ad esempio, voglio spostare questo (inclusi tutti i bambini):

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

in questo:

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

così ho questo:

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

Hai mai provato il semplice JavaScript ... 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>

Potresti voler usare la appendTofunzione (che si aggiunge alla fine dell'elemento):

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

In alternativa puoi usare la prependTofunzione (che aggiunge all'inizio dell'elemento):

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

Esempio:

$("#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>

la mia soluzione:

MOSSA:

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

COPIA:

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

Nota l'uso di .detach (). Durante la copia, fare attenzione a non duplicare gli ID.

Ho appena usato:

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

Che ho preso da qui .

Che dire di una soluzione 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);

Controlla.

Se il punto in divcui vuoi inserire il tuo elemento contiene contenuti e desideri che l'elemento venga visualizzato dopo il contenuto principale:

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

Se il punto in divcui vuoi inserire il tuo elemento ha contenuto all'interno e vuoi mostrare l'elemento prima del contenuto principale:

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

Se il punto in divcui desideri inserire l'elemento è vuoto o desideri sostituirlo interamente:

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

Se si desidera duplicare un elemento prima di uno dei precedenti:

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

Puoi usare:

Da inserire dopo,

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

Per inserire all'interno di un altro elemento,

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

Se vuoi una demo veloce e maggiori dettagli su come sposti gli elementi, prova questo link:

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

Ecco un breve esempio:

Per spostare SOPRA un elemento:

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

Per spostare DOPO un elemento:

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

Per spostarsi all'interno di un elemento, SOPRA TUTTI gli elementi all'interno di quel contenitore:

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

Per spostarsi all'interno di un elemento, DOPO TUTTI gli elementi all'interno di quel contenitore:

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

È possibile utilizzare il seguente codice per spostare l'origine nella destinazione

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

prova a lavorare 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>

Vecchia domanda ma arrivata qui perché ho bisogno di spostare il contenuto da un contenitore all'altro compresi tutti i listener di eventi .

jQuery non ha modo di farlo, ma lo fa appendChild della funzione DOM standard.

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

L'uso di appendChild rimuove il .source e lo posiziona nella destinazione inclusi i listener di eventi: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

Puoi anche provare:

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

Ma questo sovrascriverà completamente tutto ciò che hai #destination.

Ho notato un'enorme perdita di memoria e una differenza di prestazioni tra insertAfter& aftero insertBefore& before.. Se hai tonnellate di elementi DOM, o devi usare after()o before()all'interno di un evento MouseMove , la memoria del browser probabilmente aumenterà e le prossime operazioni saranno molto lente.

La soluzione che ho appena provato è usare invece before()inserBefore e insertAfter after().

Puoi usare JavaScript puro, usando il appendChild()metodo ...

Il metodo appendChild () aggiunge un nodo come ultimo figlio di un nodo.

Suggerimento: se si desidera creare un nuovo paragrafo, con testo, ricordarsi di creare il testo come nodo Testo che si aggiunge al paragrafo, quindi aggiungere il paragrafo al documento.

È inoltre possibile utilizzare questo metodo per spostare un elemento da un elemento a un altro.

Suggerimento: utilizzare il metodo insertBefore () per inserire un nuovo nodo figlio prima di un nodo figlio specificato, esistente.

Quindi puoi farlo per fare il lavoro, questo è quello che ho creato per te, usando appendChild(), esegui e vedi come funziona per il tuo 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>

Per completezza, c'è un altro approccio wrap()o wrapAll()menzionato in questo articolo . Quindi la domanda del PO potrebbe essere risolta da questo (cioè, supponendo <div id="destination" />che non esista ancora, il seguente approccio creerà un tale wrapper da zero - il PO non era chiaro se il wrapper esistesse o meno):

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

Sembra promettente. Tuttavia, quando stavo provando a fare $("[id^=row]").wrapAll("<fieldset></fieldset>")su più strutture nidificate come questa:

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

Li avvolge correttamente <div>...</div>e <input>...</input>MA QUALCUNO LASCIA <label>...</label>. Quindi ho finito per usare l'esplicito $("row1").append("#a_predefined_fieldset"). Quindi, YMMV.

miglioramento delle dimensioni sporco della risposta di Bekim Bacaj

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

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