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>
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>
<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>
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.