jQuery - Elemente hinzufügen

Mit jQuery ist es einfach, neue Elemente/Inhalte hinzuzufügen.

Neuen HTML-Inhalt hinzufügen

Wir werden die vier jQuery-Methoden kennenlernen, mit denen neuer Inhalt hinzugefügt wird:

  • append() – fügt Inhalt am Ende der ausgewählten Elemente ein
  • prepend() – fügt Inhalt am Anfang der ausgewählten Elemente ein
  • after() – fügt Inhalt nach den ausgewählten Elementen ein
  • before() – fügt Inhalt vor den ausgewählten Elementen ein

jQuery append()-Methode

Die jQuery-Methode append() fügt Inhalt am Ende der ausgewählten Elemente ein (noch innerhalb des Elements).

Beispiel

$("p").append("Text anhängen");

Selbst ausprobieren »

jQuery prepend() Methode

Die jQuery-Methode prepend() fügt Inhalt am Anfang der ausgewählten Elemente ein.

Beispiel

$("p").prepend("Text voranstellen");

Selbst ausprobieren »

Mehrere neue Elemente mit den Methoden append() und prepend() hinzufügen

In den obigen Beispielen haben wir nur Text/HTML am Anfang/Ende der ausgewählten Elemente eingefügt.

Die Methoden append() und prepend() können jedoch eine unbegrenzte Anzahl neuer Elemente über Parameter annehmen. Der Text/HTML kann über jQuery (wie in den obigen Beispielen) oder über JavaScript-Code und DOM-Elemente generiert werden.

Im folgenden Beispiel erstellen wir mehrere neue Elemente. Diese Elemente können über Text/HTML, jQuery oder JavaScript/DOM erstellt werden. Dann fügen wir diese neuen Elemente mit der Methode append() in den Text ein (gilt auch für prepend()):

Beispiel

function appendText(){ var txt1="<p>Text-1.</p>"; //Text mit HTML-Tags erstellen var txt2=$("<p></p>").text("Text-2."); //Text mit jQuery erstellen var txt3=document.createElement("p"); txt3.innerHTML="Text-3."; //Text mit DOM-Text mit DOM erstellen $("body").append(txt1,txt2,txt3); //Neue Elemente anhängen }

Selbst ausprobieren »

jQuery-Methoden after() und before()

Die jQuery-Methode after() fügt Inhalt nach den ausgewählten Elementen ein.

Die jQuery-Methode before() fügt Inhalt vor den ausgewählten Elementen ein.

Beispiel

$("img").after("Text danach hinzufügen"); $("img").before("Text davor hinzufügen");

Selbst ausprobieren »

Mehrere neue Elemente über die Methoden after() und before() hinzufügen

Die Methoden after() und before() können eine unbegrenzte Anzahl neuer Elemente über Parameter akzeptieren. Neue Elemente können über Text/HTML, jQuery oder JavaScript/DOM erstellt werden.

Im folgenden Beispiel erstellen wir mehrere neue Elemente. Diese Elemente können über Text/HTML, jQuery oder JavaScript/DOM erstellt werden. Dann fügen wir diese neuen Elemente mit der Methode after() in den Text ein (gilt auch für before()):

Beispiel

function afterText() { var txt1="<b>I </b>"; //Elemente mit HTML erstellen var txt2=$("<i></i>").text("love "); //Elemente mit jQuery erstellen var txt3=document.createElement("big"); //Elemente mit DOM erstellen txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); //Text nach dem Bild hinzufügen }

Selbst ausprobieren »
Andere Erweiterungen