Jquery Set: Set Content – text(), html(), and val()
text() : is a jQuery method that retrieves the text content of an element or sets the text content of an element. It returns or sets the text content of the selected element without any HTML formatting. For example, $(‘p’).text() will return the text content of all <p> elements in the document, and $(‘p’).text(‘New text’) will set the text content of all <p> elements to ‘New text’.
html() : is a jQuery method that retrieves the HTML content of an element or sets the HTML content of an element. It returns or sets the HTML content of the selected element with all HTML formatting included. For example, $(‘div’).html() will return the HTML content of all <div> elements in the document, and $(‘div’).html(‘<p>New HTML</p>’) will set the HTML content of all <div> elements to ‘<p>New HTML</p>’.
val() : is a jQuery method that retrieves the value of an input element or sets the value of an input element. It returns or sets the value of the selected element. For example, $(‘input’).val() will return the value of the first <input> element in the document, and $(‘input’).val(‘New value’) will set the value of all <input> elements to ‘New value’. This method can be used on input elements of different types such as text, password, checkbox, radio, etc.
Jquery Set: A Callback Function for text(), html(), and val()
A callback function is a function that is passed as an argument to another function, and it is called back at a later time. jQuery methods such as text() , html() , and val() can take a callback function as an optional argument.
The callback function is executed for each element in the selected set, and its return value is used to set the content of the element. The callback function takes two arguments: the index of the current element in the set, and the current value of the element.
Here is an example of a callback function for the text() method:
$('p').text(function(index, currentText) {
return 'Paragraph ' + (index + 1) + ': ' + currentText;
});This function will set the text content of each <p> element in the document to ‘Paragraph [index]: [current text]’, where [index] is the index of the current element in the set, and [current text] is the current text content of the element.
Here is an example of a callback function for the html() method:
$('div').html(function(index, currentHtml) {
return '<p>Div ' + (index + 1) + ': ' + currentHtml + '</p>';
});This function will set the HTML content of each <div> element in the document to ‘<p>Div [index]: [current html]</p>’, where [index] is the index of the current element in the set, and [current html] is the current HTML content of the element.
Here is an example of a callback function for the val() method:
$('input[type="text"]').val(function(index, currentValue) {
return 'Input ' + (index + 1);
});Jquery Set: This function will set the value of each text input element in the document to ‘Input [index]’, where [index] is the index of the current element in the set. Note that we are only selecting input elements of type “text” with the selector input[type=”text”] .
Jquery Set: Set Attributes – attr()
attr() is a jQuery method that is used to get or set the value of an attribute for an element. It can be used to set or get any attribute of an element such as the src attribute of an image or the href attribute of an anchor tag.
To set an attribute using attr() , you need to provide the name of the attribute as the first argument and the value to set as the second argument. For example, the following code sets the src attribute of an image with the ID my-image to a new value:
$('#my-image').attr('src', 'new-image.png');Jquery Set: To get the value of an attribute using attr() , you need to provide the name of the attribute as the first argument. For example, the following code gets the value of the href attribute of a link with the ID my-link :
var linkHref = $('#my-link').attr('href');You can also use a function as the second argument of attr() to set the value of an attribute dynamically. The function will receive the index and the current value of the attribute as its arguments. For example, the following code sets the href attribute of all links with the class external to https://example.com/ :
$('a.external').attr('href', function(index, oldValue) {
return 'https://example.com/';
});Jquery Set: In the example above, the callback function takes the index and the current value of the href attribute and returns a new value for the attribute. The function is called once for each link with the class external .