Heim > Web-Frontend > js-Tutorial > Wie verschiebt man ein DIV-Element innerhalb eines anderen mithilfe von „appendTo()' und „prependTo()' von jQuery?

Wie verschiebt man ein DIV-Element innerhalb eines anderen mithilfe von „appendTo()' und „prependTo()' von jQuery?

Barbara Streisand
Freigeben: 2024-11-28 20:14:13
Original
734 Leute haben es durchsucht

How to Move a DIV Element Inside Another Using jQuery's `appendTo()` and `prependTo()`?

So verschieben Sie ein Element in ein anderes Element

Das Verschieben eines DIV-Elements in ein anderes kann mit der jQuery-Funktion appendTo() oder erreicht werden prependTo().

appendTo() Funktion:

The Die Funktion appendTo() nimmt einen einzelnen Parameter, den Selektor für das Zielelement, und hängt das/die ausgewählte(n) Element(e) an das Ende des Ziels an.

Beispiel:

$("#source").appendTo("#destination");
Nach dem Login kopieren
Nach dem Login kopieren

Dies wird Verschieben Sie das DIV-Element mit der ID „Quelle“ und alle seine untergeordneten Elemente innerhalb des DIV-Elements mit der ID „Ziel“.

prependTo()-Funktion:

Die prependTo()-Funktion ähnelt appendTo(), hängt jedoch nicht an das Ende an, sondern an ausgewählte(s) Element(e) an den Anfang des Ziels.

Beispiel:

$("#source").prependTo("#destination");
Nach dem Login kopieren

Dies wird Verschieben Sie das DIV-Element mit der ID „Quelle“ und alle seine untergeordneten Elemente an den Anfang des DIV-Elements mit der ID „Ziel“.

Beispiel:

Bedenken Sie das folgendes HTML-Markup:

<div>
Nach dem Login kopieren
Nach dem Login kopieren

Der folgende jQuery-Code würde das „Quelle“-DIV und seinen gesamten Inhalt in das „Ziel“ verschieben DIV:

$("#source").appendTo("#destination");
Nach dem Login kopieren
Nach dem Login kopieren

Der resultierende HTML-Code wäre:

<div>
Nach dem Login kopieren
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie verschiebt man ein DIV-Element innerhalb eines anderen mithilfe von „appendTo()' und „prependTo()' von jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage