jQuery - Inhalt und Attribute festlegen

Inhalt festlegen - text(), html() und val()

Wir werden dieselben drei Methoden aus dem vorherigen Kapitel verwenden, um Inhalte festzulegen:

  • text() - Legt den Textinhalt ausgewählter Elemente fest oder gibt ihn zurück
  • html() - Legt den Inhalt ausgewählter Elemente fest oder gibt ihn zurück (einschließlich HTML-Markup)
  • val() - Wert von Formularfeldern festlegen oder zurückgeben

Das folgende Beispiel zeigt, wie Inhalte mit den Methoden text(), html() und val() festgelegt werden:

Beispiel

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("EXAMPLE"); });

Selbst ausprobieren »

Callback-Funktionen für text(), html() und val()

Die drei oben genannten jQuery-Methoden text(), html() und val() haben ebenfalls Callback-Funktionen. Die Callback-Funktion hat zwei Parameter: den Index des aktuellen Elements in der Liste der ausgewählten Elemente und den ursprünglichen (alten) Wert. Anschließend geben Sie die Zeichenkette zurück, die Sie als neuen Wert der Funktion verwenden möchten.

Das folgende Beispiel zeigt text() und html() mit Callback-Funktionen:

Beispiel

$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Alter Text:" + origText + "Neuer Text: Hallo Welt! (Index:" + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Altes HTML:" + origText + "Neues HTML: Hallo <b>Welt!</b> (Index:" + i + ")"; }); });

Selbst ausprobieren »

Attribute festlegen - attr()

Die jQuery-Methode attr() wird auch zum Festlegen/Ändern von Attributwerten verwendet.

Das folgende Beispiel zeigt, wie der Wert des href-Attributs in einem Link geändert (festgelegt) wird:

Beispiel

$("button").click(function(){ $("#example").attr("href","http://www.example.com/jquery"); });

Selbst ausprobieren »

Die Methode attr() ermöglicht es Ihnen außerdem, mehrere Attribute gleichzeitig festzulegen.

Das folgende Beispiel zeigt, wie die Attribute href und title gleichzeitig festgelegt werden:

Beispiel

$("button").click(function(){ $("#example").attr({ "href" : "http://www.example.com/jquery", "title" : "jQuery-Tutorial" }); });

Selbst ausprobieren »

Callback-Funktion für attr()

Die jQuery-Methode attr() bietet auch eine Callback-Funktion. Die Callback-Funktion hat zwei Parameter: den Index des aktuellen Elements in der Liste der ausgewählten Elemente und den ursprünglichen (alten) Wert. Gib dann die Zeichenkette zurück, die du als neuen Wert der Funktion verwenden möchtest.

Das folgende Beispiel demonstriert die attr()-Methode mit einer Callback-Funktion:

Beispiel

$("button").click(function(){ $("#example").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

Selbst ausprobieren »
Weitere Erweiterungen