jQuery Setzen von Inhalt und Attribut

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

Wir verwenden die drei gleichen Methoden aus dem vorherigen Kapitel, um den Inhalt zu setzen:

  • text() - Setzen oder Rückgabe des Textinhalts des ausgewählten Elements
  • html() - Setzen oder Rückgabe des Inhalts des ausgewählten Elements (einschließlich HTML-Tags)
  • val() - Setzen oder Rückgabe des Wertes des Formularfeldes

Der folgende Beispiel zeigt, wie man den Inhalt mit den Methoden text(), html() und val() setzt:

Beispiel

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

Versuchen Sie es selbst

text(), html() und val() Callback-Funktion

Die drei jQuery-Methode: text(), html() und val() haben ebenfalls Callback-Funktionen. Die Callback-Funktion hat zwei Parameter: Der Index des aktuellen Elements im ausgewählten Elemente-Liste und der ursprüngliche (alte) Wert. Dann gibt die Funktion den neuen Wert zurück, den Sie verwenden möchten.

Der folgende Beispiel zeigt die Verwendung von text() und html() mit Callback-Funktionen:

Beispiel

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

Versuchen Sie es selbst

Attribut setzen - attr()

Die jQuery-Methode attr() wird auch verwendet, um Attribute zu setzen oder zu ändern.

Der folgende Beispiel zeigt, wie Sie den Wert des href-Attributes in einem Link ändern (setzen) können:

Beispiel

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

Versuchen Sie es selbst

Die attr() Methode ermöglicht es Ihnen auch, mehrere Attribute gleichzeitig zu setzen.

Der folgende Beispiel zeigt, wie Sie gleichzeitig die href- und title-Attribute setzen können:

Beispiel

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

Versuchen Sie es selbst

Callback-Funktion von attr()

Die jQuery-Methode attr() bietet ebenfalls Callback-Funktionen. Diese Callback-Funktionen haben zwei Parameter: den Index des aktuellen Elements in der ausgewählten Elementliste und den ursprünglichen (alten) Wert. Die Funktion sollte dann den String zurückgeben, den Sie verwenden möchten.

Der folgende Beispiel zeigt die Verwendung der attr() Methode mit Callback-Funktion:

Beispiel

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

Versuchen Sie es selbst

jQuery HTML Referenzhandbuch

Für eine vollständige Liste der jQuery HTML-Methode besuchen Sie bitte das folgende Referenzhandbuch: