This write-up will discuss the procedure to get and set inner text of HTML Elements in jQuery. Moreover, the examples related to html(), text(), and val() methods for getting and setting HTML Elements inner text will be provided. So, let’s start!
Get and Set inner text of HTML Elements in jQuery using html() method
The JavaScript html() method is utilized to get and set the innerHTML or the content of the HTML elements in jQuery. This method returns the content of the first matched HTML element if you use it to get the inner text; while setting the inner text, it overwrites the content of all HTML elements that get matched.
Syntax of html() method
To get the inner text of HTML elements:
To get and set inner text of HTML elements:
To get and set inner text of HTML elements by utilizing a function:
In the above-given syntax, “value” is the content which you want to add as the modified inner text of HTML elements, “index” is added to return the index position in the HTML element set, lastly, “currentvalue” is added to retrieve the current inner text of a specific HTML element.
Example: Get and Set inner text of HTML Elements in jQuery() using html() method
In the below-given example, we will change the inner text of all of the paragraphs which are added as HTML elements with the <p> tag. To do so, we will write the following code in our “index.html” file:
For manipulating HTML elements in jQuery, we have to write the desired code within the body of the $(document).ready() method, in a JavaScript file. Here, we will specify that on the “click” event of our “button”, the interpreter will select the all “p” elements and set their content to the string specified in the “html()” method:
$("button").click(function(){
$("p").html("This is <b>linuxhint.com</b>");
});
});
After saving the provided code in both files, we will open “index.html” with the help of VS Code “Liver Server”:
Now, we will click on the “Change p elements content” button which is highlighted in the output:
This action will get all of the HTML paragraph elements and set their inner text as follows:
Get and Set the inner text of HTML Elements using text() method
Both text() and html() methods are used in jQuery to get and set the HTML elements inner text. However, when you utilize the text() method for getting content of HTML elements, it removes the HTML markup after retrieving the matched elements. So, if you want to get text, set text and the HTML markup of the elements at once, then go for the execution of the html() method; otherwise, the text() method got you covered.
Syntax of text() method
To get the content of HTML elements:
To get and set content of HTML elements:
To get and set content of HTML elements by utilizing a function:
Here, “value” is the content which you want to set as text of HTML elements, “index” is added to return the index position in the HTML element set, lastly, “currentvalue” is added to retrieve the current content of a specific HTML element.
Example: Get and Set the inner text of HTML Elements using text() method
Now, we will execute the previous given example with the help of “text()” method for getting and setting the text of all “p” HTML elements. Here is the code which we have added in the “index.html” file:
In our “myProject.js” file, we will invoke the “text()” method to set the inner text of all paragraph elements to “This is linuxhint.com”:
$("button").click(function(){
$("p").text("This is linuxhint.com");
});
});
Clicking on the “Set content” button will change the text of the added paragraph elements to “This is linuxhint.com”:
Get and Set inner text of HTML Elements in jQuery using val() method
When you add HTML form elements in your application, you can use the “val()” method to get and set the attribute value of the specified HTML elements. It returns the attribute of the first matched HTML element when it is invoked for getting a value and in case of setting the attribute value, it changes the attribute value for all matched HTML elements.
Syntax of val() method
To get the attribute value of HTML elements:
To get and set attribute value of HTML elements:
To get and set attribute value of HTML elements by utilizing a function:
In the above-given syntax, “value” is the specified value which you want to modify for an attribute of HTML element, “index” is added to return the index position in the HTML element set, lastly, “currentvalue” is added to retrieve the current attribute value of the selected HTML element.
Example: Get and Set inner text of HTML Elements in jQuery using val() method
The below-given example will change the attribute value of the “input field” that is added in our “index.html” file:
For this purpose, we will utilize the “myProject.js” file to sets its value to “This is linuxhint.com” by using the val() method:
$("button").click(function(){
$("input:text").val("This is linuxhint.com");
});
});
We will click on the “Set the value” button, and the string “This is linuxhint.com” will be set in the input field:
The above-given output declares that we have successfully set the value of the added input field.
Conclusion
The html(), text(), and val() are the most useful methods that can be utilized to get and set the inner text of HTML elements in jQuery. text() method gets and sets the content of HTML elements whereas, the html() method also sets its HTML markup. You can also invoke the val() HTML method for changing attribute values. This write-up discussed the methods to get and set the inner text of HTML elements in jQuery by providing appropriate examples.
