Neueste Web-Entwicklung Tutorials
 

jQuery - Hinzufügen von Elementen

❮ Zurück Weiter Kapitel ❯

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

Hinzufügen neuer HTML-Inhalt

Wir werden an vier jQuery Methoden suchen, die neue Inhalte hinzufügen werden verwendet, um:

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

jQuery append() Methode

Die jQuery append() Methode fügt Gehalt am Ende der HTML - Elemente ausgewählt.

Beispiel

$("p").append("Some appended text.");
Versuch es selber "

jQuery prepend() Methode

Das jQuery prepend() Methode fügt Inhalt AM ANFANG der HTML - Elemente ausgewählt.

Beispiel

$("p").prepend("Some prepended text.");
Versuch es selber "

In mehrere neue Elemente mit append() und prepend()

In beiden oben genannten Beispielen haben wir eingefügt nur einen Text / HTML am Anfang / Ende der HTML-Elemente ausgewählt.

Doch sowohl die append() und prepend() Methoden kann eine unendliche Anzahl von neuen Elementen als Parameter übernehmen. Die neuen Elemente können mit Text / HTML erzeugt werden (wie wir in den obigen Beispielen getan haben), mit jQuery, oder mit JavaScript-Code und DOM-Elemente.

Im folgenden Beispiel erstellen wir einige neue Elemente. Die Elemente werden mit Text / HTML erstellt, jQuery und JavaScript / DOM. Dann fügen Sie wir die neuen Elemente in den Text mit der append() Methode (dies funktioniert hätte prepend() zu):

Beispiel

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Versuch es selber "

jQuery after() und before() Methoden

Die jQuery after() Methode fügt Inhalt nach dem HTML - Elemente ausgewählt.

Die jQuery before() Methode fügt Inhalt VOR den HTML - Elemente ausgewählt.

Beispiel

$("img").after("Some text after");

$("img").before("Some text before");
Versuch es selber "

In mehrere neue Elemente after() und before()

Auch können sowohl die after() und before() Methoden kann eine unendliche Anzahl von neuen Elementen als Parameter übernehmen. Die neuen Elemente können mit Text / HTML erzeugt werden (wie wir im obigen Beispiel getan haben), mit jQuery, oder mit JavaScript-Code und DOM-Elemente.

Im folgenden Beispiel erstellen wir einige neue Elemente. Die Elemente werden mit Text / HTML erstellt, jQuery und JavaScript / DOM. Dann legen wir die neuen Elemente in den Text mit dem after() Methode (dies gearbeitet hätte before() zu):

Beispiel

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML 
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4»

jQuery HTML Referenz

Eine vollständige Übersicht über alle Methoden jQuery HTML, gehen Sie bitte auf unsere jQuery HTML / CSS Referenz .


❮ Zurück Weiter Kapitel ❯