jQuery Element hinzufügen

Mit jQuery kann der Hinzufügung neuer Elemente/Inhalte einfach vorgenommen werden.

Neues HTML-Inhalt hinzufügen

Wir werden vier jQuery-Methoden zur Hinzufügung neuer Inhalte lernen:

  • append() - Inhalt am Ende des ausgewählten Elements einfügen
  • prepend() - Inhalt am Anfang des ausgewählten Elements einfügen
  • after() - Inhalt nach dem ausgewählten Element einfügen
  • before() - Inhalt vor dem ausgewählten Element einfügen

Die jQuery append() Methode

Die jQuery append() Methode fügt Inhalt am Ende des ausgewählten Elements hinzu.

Beispiel

$("p").append("Ein angehängtes Text.");

Versuchen Sie es selbst

Die jQuery prepend() Methode

Die jQuery prepend() Methode fügt Inhalt am Anfang des ausgewählten Elements hinzu.

Beispiel

$("p").prepend("Ein vorgeschaltetes Text.");

Versuchen Sie es selbst

Mehrere neue Elemente durch append() und prepend() hinzufügen

Im obigen Beispiel fügen wir den Text/HTML nur am Anfang oder am Ende des ausgewählten Elements hinzu.

Allerdings können die Methoden append() und prepend() eine unbeschränkte Anzahl von neuen Elementen als Parameter akzeptieren. Text/HTML kann mit jQuery generiert werden (wie im obigen Beispiel), oder mit JavaScript-Code und DOM-Elementen.

In den folgenden Beispielen erstellen wir mehrere neue Elemente. Diese Elemente können mit text/HTML, jQuery oder JavaScript/DOM erstellt werden. Anschließend fügen wir diese neuen Elemente mit der append()-Methode dem Text hinzu (dasselbe gilt für prepend()):

Beispiel

function appendText()
{
var txt1="<p>Text.</p>";               // Mit HTML wird ein neuer Element erstellt
var txt2=$("<p></p>").text("Text.");   // Mit jQuery wird ein neuer Element erstellt
var txt3=document.createElement("p");  // Neues Element durch DOM erstellen
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Neue Elemente anhängen
{}

Versuchen Sie es selbst

jQuery after() und before() Methoden

Die after() Methode von jQuery fügt Inhalte nach dem ausgewählten Element ein.

Die before() Methode von jQuery fügt Inhalte vor dem ausgewählten Element ein.

Beispiel

$("img").after("Einige Text nach");
$("img").before("Einige Text vor");

Versuchen Sie es selbst

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

Die after() und before() Methoden können unendlich viele neue Elemente als Parameter empfangen. Neue Elemente können durch text/HTML, jQuery oder JavaScript/DOM erstellt werden.

In den folgenden Beispielen erstellen wir mehrere neue Elemente. Diese Elemente können durch text/HTML, jQuery oder JavaScript/DOM erstellt werden. Anschließend fügen wir diese neuen Elemente durch das after()-Verfahren in den Text ein (gilt ebenfalls für before()):

Beispiel

function afterText()
{
var txt1="<b>I </b>";                    // Neues Element durch HTML erstellen
var txt2=$("<i></i>").text("love ");     // Neues Element durch jQuery erstellen
var txt3=document.createElement("big");  // Neues Element durch DOM erstellen
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Neuen Elemente nach img einfügen
{}

Versuchen Sie es selbst

jQuery HTML Referenzhandbuch

Für den vollständigen Inhalt der jQuery HTML-Methode besuchen Sie bitte das folgende Referenzhandbuch: