Beispiel für JQuery after() und insertAfter()

After()-Methode

Die JQuery After-Methode wird zum Einfügen von Inhalten nach jedem Element im Satz übereinstimmender Elemente verwendet. Im Allgemeinen wird es verwendet, um Dinge nach einem oder mehreren Elementen einzufügen. Bei der Methode after() ist der Selektorausdruck vor der Methode der Container, nach dem der Inhalt eingefügt wird.

JQuery After()-Syntax

$(selector).after(content)

Es verfügt über einen Parameter namens „content“, bei dem es sich um einen erforderlichen Parameter handelt, der den Inhalt angibt, der nach ausgewählten Elementen eingefügt werden soll.

Beispiel für JQuery After()

<!doctype html>
<head>
<title>JQuery After Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery After Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
        $("p").after("Welcome to JavaBeat!!!");
      });
   });
</script>
<body>
   <button>Click Here</button>
   <p>Hello!!!</p>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(“p”).after(“Willkommen bei JavaBeat!!!“); Zeile fügen Sie diesen Inhalt nach der Zeile Hallo!!! ein.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

JQuery After-Methode

insertAfter()-Methode

Es wird verwendet, um Inhalte nach einem bestimmten Satz von Elementen einzufügen. Bei Verwendung dieser Methode steht der Inhalt entweder als Selektorausdruck oder als spontan erstelltes Markup vor der Methode und wird nach dem Zielcontainer eingefügt. Es funktioniert etwas anders, wenn der hinzugefügte Inhalt ein vorhandenes Element auf der Seite ist.

JQuery insertAfter()-Syntax

$(content).insertAfter(selector)

Es verfügt über Parameter namens „Content“, bei denen es sich um erforderliche Parameter handelt, die den Inhalt angeben, der nach ausgewählten Elementen eingefügt werden soll, und über einen Selektor, der angibt, wo der Inhalt eingefügt werden soll.

Beispiel für JQuery insertAfter()

<!doctype html>
<head>
<title>JQuery insertAfter Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery insertAfter Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       $("<p> Welcome to JavaBeat!!! </p>").insertAfter("p");
      });
   });
</script>
<body>
   <button>Click Here</button>
   <p>Hello!!!</p>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“button”).click(function()) definiert das Klickereignis, das auftritt, wenn auf die Schaltfläche geklickt wird.
  • $(„Willkommen bei JavaBeat!!!“).insertAfter(“p“); Zeileneinfügungen Willkommen bei JavaBeat!!! Zeile nach Hallo!!! Linie.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie diese Demo aus

JQuery-Insert-After-Methode

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen