Ich möchte ein DIV-Element in ein anderes verschieben. Zum Beispiel möchte ich dies verschieben (einschließlich aller Kinder):
<div id="source">
...
</div>in diese:
<div id="destination">
...
</div>damit ich dies habe:
<div id="destination">
<div id="source">
...
</div>
</div>Möglicherweise möchten Sie die appendTo Funktion (die an das Ende des Elements angehängt wird):
$("#source").appendTo("#destination");Alternativ können Sie auch die prependTo Funktion (die an den Anfang des Elements angehängt wird):
$("#source").prependTo("#destination");Ejemplo:
$("#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>
Eine Warnung, dass dies in jQuery Mobile möglicherweise nicht korrekt funktioniert, da stattdessen eine weitere Kopie des Elements erstellt wird.
Erstellt appenTo eine Kopie oder verschiebt es das gesamte Div zum Ziel? (denn wenn es kopiert, würde es Fehler beim Aufruf des Divs durch die id verursachen)
Hier ist ein ausgezeichneter Artikel über das Entfernen, Ersetzen und Verschieben von Elementen in jQuery: elated.com/articles/jquery-entfernen-ersetzen-bewegende-Elemente
Beste Antwort. Die akzeptierte Antwort erstellt eine Kopie und verschiebt das Element nicht, wie es die Frage verlangt.
Entschuldigung, aber die von Andrew Hare akzeptierte Antwort ist richtig - die Abtrennung ist unnötig. Versuchen Sie es in Pixics JSFiddle oben - wenn Sie die detach-Aufrufe entfernen, funktioniert es genau so, d.h. es macht eine Verschiebung, NICHT eine Kopie. Hier ist der Fork mit nur dieser einen Änderung: jsfiddle.net/D46y5 Wie in der API dokumentiert: api.jquery.com/appendTo : "Wenn ein auf diese Weise ausgewähltes Element an einer anderen Stelle im DOM eingefügt wird, wird es in das Ziel verschoben (nicht geklont) und eine neue Menge, die aus dem eingefügten Element besteht, wird zurückgegeben."
Wie wäre es mit einem JavaScript Lösung?
// 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);
Haben Sie schon einmal einfaches JavaScript ausprobiert... 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>
@SebastianSimon fühlen Sie sich bitte frei und herzlich eingeladen, Ihren eigenen originellen Ansatz und Lösung/Antwort zu schreiben, die andere Optionen nutzen und Ihre js-Schreibstil-Doktrin anwenden werden. Ich bevorzuge den alten Weg. Den sauberen JS- und HTML-Weg. Den, der die Browserkriege überlebt hat. Der Weg, der funktioniert: Immer. Und wenn es nicht funktioniert - weiß ich, dass der Programmierer schuld ist ;)
Mein Kommentar richtet sich an zukünftige Leser Ihrer Antwort. Ich will damit nur sagen, dass es verschiedene Methoden für die DOM-Einfügung gibt. appendChild ist nur einer von ihnen, aber je nach Anwendungsfall könnte jemand anderes die append o insertAdjacentElement nützlicher oder angemessener ist. Dies erfordert nicht unbedingt eine andere Antwort, denn im Grunde geht es bei dieser Frage um Umzug Elemente an anderer Stelle im DOM. Die grundlegende Antwort ist, einfach einfügen. da Elemente nur einmal im DOM vorhanden sein können. Ich weiß nicht, inwiefern der Rest Ihres Kommentars relevant ist.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
27 Stimmen
Verwenden Sie einfach $(target_element).append(to_be_inserted_element);
5 Stimmen
Oder: destination.appendChild(source) mit einfachem Javascript
0 Stimmen
Können wir dies mit CSS erreichen? Ist das möglich?
11 Stimmen
@RajKumarSamala CSS kann die Struktur von HTML nicht verändern, nur die Darstellung.