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
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Example for .text() -->
<h3>Change Text</h3>
<p id="test1">This is some text.</p>
<button id="btn1">Change Text</button>
<br><br>
<!-- Example for .html() -->
<h3>Change HTML</h3>
<p id="test2">This is <i>HTML</i> content.</p>
<button id="btn2">Change HTML</button>
<br><br>
<!-- Example for .val() -->
<h3>Change Input Value</h3>
<input type="text" id="test3" value="Some name">
<button id="btn3">Change Value</button>
<!-- jQuery script -->
<script>
$("#btn1").click(function() {
$("#test1").text("Hello world!");
});
$("#btn2").click(function() {
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function() {
$("#test3").val("Dolly Duck");
});
</script>
</body>
</html>
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()
<!DOCTYPE html>
<html>
<head>
<title>jQuery Callback Example</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Example for .text() with callback -->
<h3>Change Text with Callback</h3>
<p id="test1">This is the original text.</p>
<button id="btn1">Update Text</button>
<br><br>
<!-- Example for .html() with callback -->
<h3>Change HTML with Callback</h3>
<p id="test2">This is <i>original HTML</i> content.</p>
<button id="btn2">Update HTML</button>
<!-- jQuery script -->
<script>
$("#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 + ")";
});
});
</script>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>jQuery Change Attribute Example</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Link whose href will change -->
<a id="w3s" href="https://www.w3schools.com">Visit W3Schools</a>
<br><br>
<!-- Button to change href -->
<button>Change Link</button>
<!-- jQuery script -->
<script>
$("button").click(function() {
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
alert("Link changed! New href: " + $("#w3s").attr("href"));
});
</script>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>jQuery Set Multiple Attributes</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Link whose attributes will change -->
<a id="w3s" href="https://www.w3schools.com" title="Original W3Schools Link">Visit W3Schools</a>
<br><br>
<!-- Button to change multiple attributes -->
<button>Update Link Attributes</button>
<script>
$("button").click(function() {
$("#w3s").attr({
"href": "https://www.w3schools.com/jquery/",
"title": "W3Schools jQuery Tutorial"
});
alert("Link updated!\nHref: " + $("#w3s").attr("href") + "\nTitle: " + $("#w3s").attr("title"));
});
</script>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>jQuery Attribute Callback Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Link whose href will be updated -->
<a id="w3s" href="https://www.w3schools.com" title="Original W3Schools Link">Visit W3Schools</a>
<br><br>
<!-- Button to update href using a callback -->
<button>Append /jquery/ to Link</button>
<script>
$("button").click(function() {
$("#w3s").attr("href", function(i, origValue) {
return origValue + "/jquery/";
});
alert("Updated href: " + $("#w3s").attr("href"));
});
</script>
</body>
</html>
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.
More topic in jQuery
