Beispiel für JQuery prepend() und prependTo()

JQuery Prepend()-Methode

Die JQuery-Methode prepend() wird verwendet, um Inhalte am Anfang jedes Elements beim Abgleich von HTML-Elementen einzufügen. Es fügt den angegebenen Inhalt als erstes untergeordnetes Element jedes Elements in die jQuery-Sammlung ein. Bei der prepend()-Methode ist der Selektorausdruck vor der Methode der Container, in den der Inhalt eingefügt wird. Diese Methode ähnelt der Methode append(), der einzige Unterschied besteht darin, dass die Methode append() Inhalte am Ende ausgewählter Elemente einfügt.

JQuery Prepend()-Syntax

$(selector).prepend(content);

Es enthält einen Parameter namens „content“, der den Inhalt angibt, der am Anfang jedes Elements in der Menge der übereinstimmenden Elemente eingefügt werden soll.

Beispiel für JQuery Prepend()

<!doctype html>
<head>
<title>JQuery Prepend Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Prepend Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
       $(".myprepend").prepend("<strong>Div element is prepended...</strong>");
      });
   });
</script>
<body>
<button>Click to see prepend elements</button>
   <div   style="color:red">
      <p>Hello World!!!</p>
   </div>
</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.
  • $(“.myprepend“).prepend(“Das Div-Element wird vorangestellt…„); Die Anweisung weist den JS-Interpreter an, den Inhalt in Anführungszeichen den div-Klassenelementen voranzustellen.
  • Wenn Sie das Skript ausführen, klicken Sie auf die Schaltfläche, die im Browser angezeigt wird. Die Zeile „Div element“ wird der Zeile „Hello World!!!“ vorangestellt.

JQuery Prepend() Demo

  • Führen Sie diese Demo aus

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

Beispiel für eine JQuery-Prepend-Methode

JQuery PrependTo()-Methode

Die prependTo()-Methode erledigt auch die gleiche Aufgabe wie die prepend()-Methode. Es fügt Inhalte am Anfang der angegebenen Elemente ein. Die Methode prepend() geht dem Inhalt voran und bei der Methode prependTo() wird der Inhalt der Methode als Selektorausdruck vorangestellt und in den Zielcontainer eingefügt. Der Hauptunterschied zwischen beiden Methoden liegt in der Syntax, insbesondere in der Platzierung von Inhalt und Ziel.

JQuery PrependTo()-Syntax

$(content).prependTo(selector);

Es enthält einen Parameter namens „Selektor“, der angibt, welchen Elementen in der Menge der übereinstimmenden Elemente der Inhalt vorangestellt werden soll.

Beispiel für JQuery PrependTo()

<!doctype html>
<head>
<title>JQuery PrependTo Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery PrependTo Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
       $("<strong>Div element is prepended...</strong>").prependTo(".myprepend");
      });
   });
</script>
<body>
<button>Click to see prepend elements</button>
   <div   style="color:red">
   </div>
   <p>Hello World!!!</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.
  • $(“Das Div-Element wird vorangestellt…„).prependTo(“.myprepend“); Die Anweisung weist den JS-Interpreter an, den Inhalt in Anführungszeichen den div-Klassenelementen voranzustellen.
  • Wenn Sie das Skript ausführen, klicken Sie auf die Schaltfläche, die im Browser angezeigt wird. Die Zeile „Div element“ wird der Zeile „Hello World!!!“ vorangestellt.

JQuery PrependTo() Demo

  • Führen Sie diese Demo aus

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

Beispiel für die JQuery PrependTo-Methode

Kommentar verfassen

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

Nach oben scrollen