Elemente hinzufügen mit jQuery

Eine sehr wichtige Komponente von jQuery ist die Möglichkeit, den DOM zu steuern.

jQuery bietet Methoden, um neue HTML-Elemente auf effektive Weise hinzuzufügen.

In diesem Kapitel erläutern wir, wie man neue HTML-Elemente in den DOM hinzufügt./Inhalt.

jQuery hinzufügen neuer HTML-Inhalt

Mit jQuery können wir neue HTML-Elemente leicht hinzufügen.

Wir haben die folgenden jQuery-Methode, um neuen Inhalt hinzuzufügen:

• append()

• prepend()

• after()

• before()

• wrap()

Ich werde Ihnen zeigen, wie Sie jede dieser Methoden verwenden.

jQuery append() Methode

jQuery append()Diese Methode fügt das angegebene Inhalt am Ende jedes ausgewählten Elements (als letztes Kind-Element) ein.

Im folgenden Beispiel wird Text zu allen Absätzen hinzugefügt:

$("button").click(function(){
　　$("p").append("Hello world");
});

Im folgenden Beispiel wird HTML zu allen Absätzen hinzugefügt:

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

jQuery prepend() Methode

jQuery prepend()Diese Methode fügt das angegebene Inhalt am Anfang jedes ausgewählten Elements (als erster Kind-Element) ein.

Im folgenden Beispiel wird Text vor jedem Absatz hinzugefügt:

$("button").click(function(){
　　$("p").prepend("Hello world");
});

Im folgenden Beispiel wird HTML vor jedem Absatz hinzugefügt:

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

Elemente mit append() und prepend() hinzufügen

Im obigen Beispiel fügen wir in diesem Beispiel nur am Anfang des ausgewählten HTML-Elements Text hinzu/An dem Ende wurde ein Text hinzugefügt/ HTML.

Aber,append()undprepend()Diese Methoden können eine unendliche Anzahl neuer Elemente als Parameter akzeptieren.

Neue Elemente können mit HTML-Elementen (wie im obigen Beispiel), DOM-Elementen oder jQuery-Objekten generiert werden.

In diesem Beispiel verwenden wir HTML-Elemente, DOM-Elemente und jQuery-Objekte, um mehrere neue Elemente zu erstellen:

function appendText() {
　　let x = "<p>示例文本.<"/p>";　　//　Mit HTML Elemente erstellen　　
　　let y = $("<p></p>").text("Beispieltext.");　　//　Mit jQuery erstellen
　　let z = document.createElement("p");//　Mit DOM erstellen
　　z.innerHTML = "Beispieltext.";
　　$("body").append(x, y, z);　　//Neue Elemente hinzufügen　
}

jQuery after() Methode

jQuery after()Diese Methode fügt das angegebene Inhalt nach dem ausgewählten Element ein.

Im folgenden Beispiel wird Inhalt nach jedem Absatz eingefügt:

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

jQuery before() Methode

jQuery before()Diese Methode fügt das angegebene Inhalt vor dem ausgewählten Element ein.

Im folgenden Beispiel wird Inhalt vor jedem Absatz eingefügt:

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

Multiple Elemente mit after() und before() hinzufügen

Gleichzeitig,after()undbefore()Diese Methoden können eine unendliche Anzahl neuer Elemente als Parameter akzeptieren.

Neue Elemente können mit HTML-Elementen (wie im obigen Beispiel), DOM-Elementen oder jQuery-Objekten generiert werden.

In diesem Beispiel verwenden wir HTML-Elemente, DOM-Elemente und jQuery-Objekte, um mehrere neue Elemente zu erstellen:

function afterText() {
　　let x = "<p>示例文本.<"/p>";　　//　Mit HTML Elemente erstellen　　
　　let y = $("<p></p>").text("Beispieltext.");　　//　Mit jQuery erstellen
　　let z = document.createElement("p");//　Mit DOM erstellen
　　z.innerHTML = "Beispieltext.";
　$("h1").after(x, y, z);　　//　In <h1Neues Element nach dem > einfügen
}

Methode wrap() von jQuery

jQuery wrap()Die Methode packt die angegebene HTML-Struktur um jeden ausgewählten Element ein.

Der folgende Beispiel packt den DIV-Element in jedem <p>-Element ein und aus:

$("button").click(function(){
　　$("p").wrap("<div></div>");
});

jQuery HTML-Referenz

Für eine vollständige Referenz der HTML-Methode besuchen Sie bitte unserejQuery HTML / CSS-Referenz.