Updated March 31, 2023
Introduction to textContent in jQuery
In jQuery, we have textContent, which is used to set or get the text content of the particular node. We may encounter many situations where we need to set the content of the node based on some value we get; then, we can go for textContent in jQuery. This method is easy to use and implement. The main purpose of this method is to set the content of the node, or by the use of it, we can get the content as well and change it if we want. To this inside our program, we do not require to download or include any external library, it is available in jQuery by default, but we have some browsers version which does not support this method, like internet explorer, also its internally working and how we can implement this in our program to set and get the node value easily.
Syntax of textContent in jQuery
As we know, textContent is used at the node level in jQuery; it works similarly to innerText() methods but with a different syntax.
Here we will first see at the basic syntax of textContent to set and get the value of a particular node.
1. To set value
Syntax:
node_name.textContent = your_text2. To get value
Syntax:
var varibale_name = node_name.textContentAs you can see in the above syntax, we can easily get ad set the value of the node.
How textContent Works in jQuery?
The textContent in jQuery is an inbuilt method which is used to set and get the value of a node. By the use of this, we can easily change or get the new value of the node based on some condition or our requirement. To use this, we do not require any external libraries; it is easy to use and handle by the developers.
1. get the value of node
In jQuery, we have textContent methods, which can be used to get the value of the node; we just have to call this method on the node we want.
Example:
<button onclick="demofunction()" id="para1">some text</button>
var demovalue = document.getElementById("para1").textContentAs you can see in the above code, we are trying to get the value of the node, which is called as ‘para1’ here. So this will return the text that contains by the particular node. Here we have a simple button as the id ‘para1’ and the text t content as ‘some text’, so whenever we will try to get the textContent of this node, it will return as ‘some text’ as the output of this above program in jQuery. So in this example, we are trying to get the value or text of the particular textContent, which is easy to use and handle as well.
2. set the value of the node
By the use of this method, we can easily set the text of a particular node.
Example:
document.getElementById("para1").textContent = "value changed here !!";By the above line of code, we are trying to change the text of the node by using the textContent method from jQuery. So what we are doing here is; first, we are trying to get the element by using the getElementById method; once we got it, we are trying to change the value of the node by using the textContent method and assigned it a new value here. So when we run this, the ‘para1’ node will change its text to whatever is assigned to it.
This method is similar with the innerText, but we have some minor differences while using these two:
- By the use of the textContent property or method, we can easily get the text for all the elements. But this is not the case with the innerText property; it cannot be used to change the text of the <script> and <style> elements.
- If we have some elements whose text are hidden with the help of CSS, then we can get those text with the help of textContent, but innerText will not be able to perform such action.
Browsers support for this property are given below:
- Mozilla: Yes
- Chrome: 1.0
- Internet Explorer: 9.0
- Opera: Yes
Examples of textContent in jQuery
Given below are the examples of textContent in jQuery:
Example #1
In the below example, we are trying to get the value of the button text by using the textContent property in jQuery.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Demo to show the working of tectContent ot get the value from it in jquery !!</p>
<button onclick="demoFunction()" id="demoBtn">I am button </button>
<h3 id="show"></h3>
<script>
function demoFunction() {
var i = document.getElementById("demoBtn").textContent;
document.getElementById("show").innerHTML = i;
}
</script>
</body>
</html>Output:
Example #2
Simple program to set the new text using textContent in JQuery.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Demo to show the working of textContent to set the new value from it in jquery !!</p>
<button onclick="demoFunction()" id="demoBtn">I am button </button>
<h3 id="show"></h3>
<script>
function demoFunction() {
var newtext = "text changed here !!"
document.getElementById("demoBtn").textContent = newtext;
document.getElementById("show").innerHTML = newtext;
}
</script>
</body>
</html>Output:
Conclusion
We have already seen the implementation and usage of the textContent property in jQuery, which can help us easily change or get the text content of the node we required; also, we can get the hidden node text using this. This is easy to use and handle by the developers as well, with no external libraries required.
Recommended Articles
This is a guide to textContent in jQuery. Here we discuss the introduction, how textContent works in jQuery? And examples, respectively. You may also have a look at the following articles to learn more –
