jQuery - Inhalte und Attribute festlegen
Inhalt festlegen - text(), html() und val()
Wir verwenden die gleichen drei Methoden wie auf der vorherigen Seite, um den Inhalt festzulegen :
text()- Legt den Textinhalt ausgewählter Elemente fest oder gibt ihn zurückhtml()- Setzt oder gibt den Inhalt ausgewählter Elemente zurück (einschließlich HTML-Markup)val()- Legt den Wert von Formularfeldern fest oder gibt ihn zurück
Das folgende Beispiel zeigt, wie Inhalte mit den Methoden jQuery text(), html(), und festgelegt val()werden:
Beispiel
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Eine Callback-Funktion für text(), html() und val()
Alle drei oben genannten jQuery-Methoden: text(), html(), und val(), enthalten 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. Sie geben dann die Zeichenfolge zurück, die Sie als neuen Wert von der Funktion verwenden möchten.
Das folgende Beispiel demonstriert text()und html()mit einer Callback-Funktion:
Beispiel
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Attribute setzen - attr()
Die jQuery attr()-Methode wird auch zum Setzen/Ä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(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Die attr()Methode ermöglicht es Ihnen auch, mehrere Attribute gleichzeitig festzulegen.
Das folgende Beispiel zeigt, wie die beiden Attribute href und title gleichzeitig gesetzt werden:
Beispiel
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Eine Callback-Funktion für attr()
Die jQuery-Methode enthält attr()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) Attributwert. Sie geben dann die Zeichenfolge zurück, die Sie als neuen Attributwert von der Funktion verwenden möchten.
Das folgende Beispiel demonstriert attr()mit einer Callback-Funktion:
Beispiel
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery-Übungen
jQuery-HTML-Referenz
Eine vollständige Übersicht aller jQuery-HTML-Methoden finden Sie in unserer jQuery-HTML/CSS-Referenz .