jQuery - Inhoud en attributen instellen
Inhoud instellen - text(), html() en val()
We zullen dezelfde drie methoden van de vorige pagina gebruiken om inhoud in te stellen :
text()- Stelt de tekstinhoud van geselecteerde elementen in of retourneert dezehtml()- Stelt of retourneert de inhoud van geselecteerde elementen (inclusief HTML-opmaak)val()- Stelt de waarde van formuliervelden in of retourneert deze
Het volgende voorbeeld laat zien hoe u inhoud instelt met de jQuery text(), html(), en val()methoden:
Voorbeeld
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Een callback-functie voor text(), html() en val()
Alle drie de bovenstaande jQuery-methoden: text(), html(), en val(), hebben ook een callback-functie. De callback-functie heeft twee parameters: de index van het huidige element in de lijst met geselecteerde elementen en de oorspronkelijke (oude) waarde. Vervolgens retourneert u de tekenreeks die u wilt gebruiken als de nieuwe waarde van de functie.
Het volgende voorbeeld demonstreert text()en html()met een callback-functie:
Voorbeeld
$("#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 + ")";
});
});
Attributen instellen - attr()
De jQuery- attr()methode wordt ook gebruikt om attribuutwaarden in te stellen/wijzigen.
Het volgende voorbeeld laat zien hoe u de waarde van het href-attribuut in een link kunt wijzigen (instellen):
Voorbeeld
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Met de attr()methode kunt u ook meerdere attributen tegelijk instellen.
Het volgende voorbeeld laat zien hoe u zowel de href- als de title-attributen tegelijkertijd instelt:
Voorbeeld
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Een callback-functie voor attr()
De jQuery-methode attr()wordt ook geleverd met een callback-functie. De callback-functie heeft twee parameters: de index van het huidige element in de lijst met geselecteerde elementen en de oorspronkelijke (oude) attribuutwaarde. Vervolgens retourneert u de tekenreeks die u wilt gebruiken als de nieuwe attribuutwaarde van de functie.
In het volgende voorbeeld wordt gedemonstreerd attr()met een callback-functie:
Voorbeeld
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery-oefeningen
jQuery HTML-referentie
Ga voor een compleet overzicht van alle jQuery HTML-methoden naar onze jQuery HTML/CSS Reference .