Come spostare un elemento in un altro elemento?

Vorrei spostare un elemento DIV dentro un altro. Per esempio, voglio spostare questo (compresi tutti i figli):

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

in questo:

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

in modo da avere questo:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Domanda modificata 17º settembre 2014 в 3:45
Programmazione
javascript html jquery
14º agosto 2009 в 8:14
97 visualizzazioni
Soluzione

Potresti voler usare la funzione appendTo (che aggiunge alla fine dell'elemento):

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

In alternativa potresti usare la funzione prependTo (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>

appendTo main
prependTo main
Clonkex
Risposta modificata 26º febbraio 2018 в 12:32
Commentari (15)

Ho appena usato:

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

Che ho preso da qui.

Cᴏʀʏ
Risposta modificata 24º luglio 2015 в 2:55
Commentari (4)

Se il div dove vuoi mettere il tuo elemento ha del contenuto all'interno, e vuoi che l'elemento venga mostrato dopo il contenuto principale:

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

Se il div dove vuoi mettere il tuo elemento ha del contenuto all'interno, e vuoi mostrare l'elemento prima del contenuto principale:

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

Se il div dove vuoi mettere il tuo elemento è vuoto, o vuoi sostituirlo completamente:

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

Se volete duplicare un elemento prima di uno qualsiasi dei precedenti:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Risposta modificata 22º giugno 2016 в 11:05
Commentari (1)