JQuery, eine Bibliothek von JavaScript, macht zahlreiche Web -Programmieraufgaben extrem einfach zu erfüllen. Aufgaben, die normalerweise mehrere Codezeilen übernehmen würden, um wie Ereignishandhabung, Animationen oder AJAX zu erreichen, können in nur einer Codezeile erfolgen. Neben diesen Aufgaben ist das Hinzufügen von HTML -Elementen mit großer Leichtigkeit mit mehreren Methoden in JQuery möglich hinzugefügt.

In diesem Leitfaden werden Sie mithilfe entsprechender Beispiele über JQuery mit mehreren Methoden HTML -Elemente über JQuery hinzufügen.

So fügen Sie HTML -Elemente über JQuery hinzu

JQuery bietet die folgenden vier Methoden zum Hinzufügen von HTML -Elementen.

1. append ()
2. prepend ()
3. Vor()
4. nach()

Hier haben wir alle diese ausführlich besprochen.

append () Methode

Die Methode append () fügt ein Element als Kind in einem bestimmten Element hinzu. In Form von Parametern ist eine unbegrenzte Anzahl neuer HTML -Elemente erforderlich.

Diese Methode funktioniert so, dass die HTML -Elemente entweder mit Text/HTML, JQuery oder JavaScript generiert werden. Anschließend werden diese neu generierten Elemente als das letzte Kind angehängt, das die Methode append () verwendet.

Beispiel

Nehmen wir an, Sie möchten neue Elemente am Ende einer bestellten Liste mit der Methode append () anhängen möchten. Verwenden Sie den folgenden Code.

Html

1. Artikel


2. Artikel


3. Artikel

Im obigen Code haben wir eine Schaltfläche erstellt und auch eine bestellte Liste erstellt.

JQuery

Mit der Methode jQuery append () fügen wir der Liste ein weiteres Element hinzu, indem wir auf die Schaltfläche klicken.

Ausgang

Anfangs waren drei Elemente in der Liste.

Angenommen, Sie klicken dreimal auf die Schaltfläche.

Drei weitere Elemente werden zur Liste hinzugefügt.

prepend () Methode

Diese Methode funktioniert ähnlich wie die der append () -Methode mit dem einzigen Unterschied, dass sie die Elemente als erstes Kind vorbereitet, anstatt die neu erstellten HTML. Außerdem werden eine unbegrenzte Anzahl neuer HTML -Elemente in Form von Parametern verwendet.

Beispiel

Wir werden das gleiche Beispiel wie oben verwenden und sehen, wie die Prepend () -Methode funktioniert.

JQuery

Im obigen Code -Snippet verwenden wir die Methode Prepend (), um Elemente zu Beginn der bestellten Liste hinzuzufügen.

Ausgang

Ursprünglich waren drei Elemente auf der Liste.

Angenommen, Sie klicken zweimal auf die Schaltfläche.

Zu Beginn der bestellten Liste werden zwei Elemente hinzugefügt.

vor () Methode

Die Methode vor () nimmt eine unbegrenzte Anzahl neuer HTML -Elemente in Form von Parametern an. Diese Methode funktioniert so, dass die HTML -Elemente entweder mit Text/HTML, JQuery oder JavaScript generiert werden und vor einem bereits vorhandenen Element als Geschwister hinzugefügt werden.

Beispiel

Angenommen, Sie möchten vor einem Absatz einen Übergang hinzufügen, indem Sie auf eine Schaltfläche klicken. Dies kann mit der Methode vor () vor () erfolgen.

Html

Ein Absatz.

In dem obigen Code, den wir erstellt haben

, und Elemente. Jetzt werden wir die METHODE vor () verwenden, um vor dem Absatz eine Überschrift hinzuzufügen.

JQuery

Ausgang

Die Methode vor () funktioniert ordnungsgemäß

nach () Methode

Diese Methode nimmt eine unbegrenzte Anzahl neuer HTML -Elemente in Form von Parametern an. Diese Methode funktioniert ähnlich wie die der vor () () Methode, wobei der einzige Unterschied darin besteht, dass die neuen HTML -Elemente als Geschwister hinzugefügt werden, aber nach den bereits vorhandenen Elementen.

Beispiel

Angenommen, Sie möchten nach einer Überschrift einen Absatz hinzufügen, indem Sie auf eine Schaltfläche klicken. Dies kann mit der Methode After () erfolgen.

Html

Überschrift

In dem obigen Code, den wir erstellt haben

, und Elemente, und die Verwendung der After () -Methode wird ein Absatz nach der Überschrift hinzugefügt.

JQuery

Ausgang

Erfolgreich einen Absatz nach der Überschrift hinzugefügt.

Abschluss

HTML -Elemente können mit verschiedenen Methoden hinzugefügt werden, die von JQuery wie append (), prepend (), vor () und nach () bereitgestellt werden können. Alle diese Methoden nehmen eine unbegrenzte Anzahl neuer HTML -Elemente in Form von Parametern und sobald die Elemente erzeugt werden. Alle diese Methoden werden in diesem Leitfaden zusammen mit relevanten Beispielen detailliert erörtert.