Wie verschachtele ich ein DOM-Element in einem anderen mithilfe von appendTo und prependTo?

DOM-Elemente verschieben: So verschachteln Sie ein Element in einem anderen

In der Webentwicklung ist es oft notwendig, Elemente innerhalb der DOM-Struktur zu verschieben , sei es aus ästhetischen oder funktionalen Gründen. Eine dieser Anforderungen besteht darin, ein bestimmtes DIV-Element in ein anderes vorhandenes DIV-Element zu verschieben.

Problem:

Angenommen, Sie haben zwei DIV-Elemente: „Quelle“ und „Ziel“. Sie möchten „Quelle“ und seine untergeordneten Elemente nach „Ziel“ verschieben, sodass es zu einem verschachtelten Element von „Ziel“ wird.

Lösung:

Verwendung von appendTo:

Die appendTo-Funktion wird üblicherweise verwendet, um ein Element am Ende eines anderen Elements einzufügen. Zum Beispiel:

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

Diese Methode hängt „Quelle“ (einschließlich ihres Inhalts) an das Ende von „Ziel“ an.

Mit prependTo:

Alternativ fügt die prependTo-Funktion ein Element am Anfang eines anderen Elements hinzu. Zum Beispiel:

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

Beispiel:

Bedenken Sie den folgenden Codeausschnitt:

<div>

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

Wenn die Schaltfläche „appendTo“ aktiviert ist gedrückt wird, wird „moveMeIntoMain“ an das Ende von „main“ angehängt. Durch Klicken auf die Schaltfläche „prependTo“ wird „moveMeIntoMain“ am Anfang von „main“ eingefügt.

Das obige ist der detaillierte Inhalt vonWie verschachtele ich ein DOM-Element in einem anderen mithilfe von appendTo und prependTo?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!