Wie kann man ein Element in ein anderes Element verschieben?

Ich möchte ein DIV-Element innerhalb eines anderen verschieben. Zum Beispiel möchte ich dies verschieben (einschließlich aller Kinder):

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

in dieses:

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

, so dass ich dies habe:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Bearbeitete Frage 17. September 2014 в 3:45
Programmierung
javascript html jquery
14. August 2009 в 8:14
98 Aufrufe
Lösung

Möglicherweise möchten Sie die Funktion appendTo verwenden (die an das Ende des Elements anfügt):

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

Alternativ können Sie auch die Funktion prependTo verwenden (die am Anfang des Elements anfügt):

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

Beispiel:

$("#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
Bearbeitete Antwort 26. Februar 2018 в 12:32
Kommentare (15)

Ich habe nur benutzt:

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

Das habe ich von hier übernommen.

Cᴏʀʏ
Bearbeitete Antwort 24. Juli 2015 в 2:55
Kommentare (4)

Wenn das "div", in das Sie Ihr Element einfügen wollen, einen Inhalt hat und Sie wollen, dass das Element nach dem Hauptinhalt angezeigt wird:

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

Wenn das div, in das Sie Ihr Element einfügen möchten, einen Inhalt hat und Sie das Element vor dem Hauptinhalt anzeigen möchten:

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

Wenn das "div", in das Sie Ihr Element einfügen wollen, leer ist, oder Sie es ganz ersetzen wollen:

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

Wenn Sie ein Element vor einem der oben genannten Elemente duplizieren möchten:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Bearbeitete Antwort 22. Juni 2016 в 11:05
Kommentare (1)