Setting Content with jQuery – text(), html(), and val()
The same jQuery methods used to get content—text(), html(), and val()—can also be used to set content.
- text() – Sets the plain text of the selected element(s)
- html() – Sets the HTML content, including any markup
- val() – Sets the value of form fields such as inputs and textareas
Example – Setting Text, HTML, and Input Values
$("#btn1").click(function() {
$("#test1").text("Hello world!");
});
$("#btn2").click(function() {
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function() {
$("#test3").val("Dolly Duck");
});
In this example:
- Button 1 sets plain text inside the #test1 element.
- Button 2 sets bolded HTML content inside the #test2 element.
- Button 3 sets the value of an input field with ID #test3.
These methods make it easy to dynamically update your web content and form fields using jQuery.
Callback Functions with jQuery text(), html(), and val()
The text(), html(), and val() methods in jQuery can also accept callback functions as arguments. This allows you to dynamically generate new content based on the current (original) value and the element’s index.
Callback Parameters:
The callback function receives:
- index – The position of the element in the jQuery selection
- originalValue – The current content or value of the element
You return the new value from the callback.
Example – Using Callback with text() and html()
$("#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, origHtml) {
return "Old HTML: " + origHtml + " | New HTML: Hello <b>world!</b> (Index: " + i + ")";
});
});
In these examples:
- Button 1 updates the text of #test1, showing both the original text and new text along with the index.
- Button 2 updates the HTML of #test2 similarly, preserving the original and injecting new styled content.
Setting Attribute Values with jQuery – attr()
In addition to retrieving attribute values, the jQuery attr() method can also be used to set or change the value of an attribute.
Example – Changing the href Attribute of a Link
$("button").click(function() {
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
In this example, when the button is clicked, the href attribute of the element with ID #w3s is updated to point to the jQuery tutorial on W3Schools.
This method is commonly used to dynamically update links, image sources, form attributes, and more.
Setting Multiple Attributes with jQuery – attr()
The jQuery attr() method also allows you to set multiple attributes at once by passing an object of key-value pairs. This is a cleaner and more efficient way to update several attributes on the same element.
Example – Setting href and title Together
$("button").click(function() {
$("#w3s").attr({
"href": "https://www.w3schools.com/jquery/",
"title": "W3Schools jQuery Tutorial"
});
});
In this example, when the button is clicked:
- The href attribute is updated with a new URL.
- The title attribute is set, which will appear as a tooltip when hovering over the link.
Using an object with attr() helps keep your code concise and well-organized when modifying multiple attributes.
Using a Callback Function with jQuery attr()
Just like other jQuery methods, the attr() method also supports a callback function. This allows you to dynamically update an attribute's value based on its current (original) value and the element’s index in the selection.
Callback Parameters:
- index – The position of the element in the jQuery selection
- originalValue – The current value of the attribute
You return the new value from the callback function.
Example – Modifying an href Attribute with a Callback
$("button").click(function() {
$("#w3s").attr("href", function(i, origValue) {
return origValue + "/jquery/";
});
});
In this example:
- When the button is clicked, the existing href attribute of the element with ID #w3s is updated.
- The new value is created by appending /jquery/ to the original URL.
This technique is useful when you need to adjust attribute values dynamically based on their current state.
