Tutorial

Sign Up

log In

JQuery
jQuery Set

❮ Previous

Next ❯

jQuery Set Methods, which are used to update or modify content, attributes, styles, and form values of elements dynamically.

Set Content - text(), html(), and val()

We will use the same three methods from the previous page to set content:

Method

Description

Example Code

.text()

Sets the plain text content of an element

$("#element").text("New text");

.html()

Sets the HTML content (with tags)

$("#element").html("<b>Bold</b>");

.val()

Sets the value of form fields

$("#input").val("New value");

The following example demonstrates how to set content with the jQuery text(), html(), and val() methods:

Example
<script>
$(document).ready(function(){
$("#setValues").click(function(){
// Set plain text (no HTML)
$("#heading").text("Updated Plain Text");

// Set HTML content (with formatting)
$("#paragraph").html("<i>Updated with italic HTML</i>");

// Set form input value
$("#nameInput").val("John Doe");
});
});
</script>

Try it yourself

A Callback Function for text(), html(), and val()


In jQuery, the text(), html(), and val() methods can also accept a callback function as an argument. This callback function allows you to dynamically set the value based on the current content of the element.


The following example demonstrates text(), val()  and html() with a callback function:

Example
<script>
$(document).ready(function(){
$("#update").click(function(){

// text() with callback
$("#heading").text(function(index, currentText){
return currentText + " World!";
});

// html() with callback
$("#paragraph").html(function(index, currentHtml){
return currentHtml + " <i>(updated)</i>";
});

// val() with callback
$("#inputBox").val(function(index, currentValue){
return currentValue + " + Changed";
});
});
});
</script>

Try it yourself

Set Attributes - attr()

The .attr() method in jQuery is used to set or get HTML attributes of elements like src, href, title, id, etc.

The following example demonstrates how to change (set) the value of the href attribute in a link:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myLink").attr("href", "https://example.com");
});
});
</script>

Try it yourself

The attr() method also allows you to set multiple attributes at the same time.

The following example demonstrates how to set both the href and title attributes at the same time:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myLink").attr({
"href": "https://example.com",
"title": "Go to Example"
});
});
});
</script>

Try it yourself

A Callback Function for attr()

you can use a callback function with jQuery’s .attr() method to dynamically set attribute values based on existing values or other logic.


Syntax:


$(selector).attr("attributeName", function(index, currentValue){
 // return new value
});


  • index: The index of the element in the jQuery collection.
  • currentValue: The current value of the specified attribute.


The following example demonstrates attr() with a callback function:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("a").attr("title", function(index, currentValue){
return "You are visiting: " + $(this).attr("href");
});
});
});
</script>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.