In some situations, we need to retrieve or get the text value stored inside a particular div element to use some condition, if the text is dynamic or for some other tasks in jQuery. By getting the value stored in the div element, we can perform any task based on the value of the element in jQuery.
In jQuery, we can retrieve or get the stored value of a div element using three different methods. The methods are listed below −
- By using the text() method
- By using the html() method
Let us now understand working of each of these methods in details with the help of code examples.
By Using the Text() Method
The text() method in jQuery is used to get the value stored inside a div element. This method will return the value stored in the div element even if the div element has some more nested div or some other elements.
Let us now discuss it in details by practically implementing it with the help of jQuery code example.
Note: Please make sure that the jQuery script is included in the HTML document.
Steps
- Step 1 − In the first step, we will create a simple div element with some direct text value inside it.
- Step 2 − In the next step, we will create another div element with some nested div element or some other nested elements.
- Step 3 − In this final step, we will retrieve the stored value inside the both div elements with the help of text() method of jQuery.
Example
The below example will explain how to retrieve the value stored inside a single div element and nested div elements with the help of text() method −
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.contain {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: gold;
}
.container {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
</style>
</head>
<body>
<h2> Retrieving stored value from div element using jQuery </h2>
<div class = "contain">
Direct text inside a single div element.
</div>
<div class = "container">
<div>
<span>
<h4> Heading of the nested div element. </h4>
</span>
</div>
</div>
<p class = "result"> </p>
<script>
var result = $('.result');
var singleDivText = $('.contain').text();
var nestedDivText = $('.container').text();
result.html(" The direct text inside the single div is: <b> " + singleDivText + " </b> </br> The text inside the nested div element is: <b> " + nestedDivText + " </b> ");
</script>
</body>
</html>
In this example, we retrieved the value stored in the two different div elements with the help of text() method. We selected both the div elements by the classes given to them and then use the text() method to get the value stored in them.
By Using the Html() Method
The html method also works similar to the text() method. The difference between these two methods is that the text() method only gives the text inside the div element. But, html() method also returns the stored value with some extra spaces and line breaks with respect to the type of nested element it contains. We can use the trim() method of jQuery to remove the white spaces around the retrieved value.
Let us understand the use of the html() method to retrieve the stored value inside div element with the help of code example.
The algorithm of this example is similar to the algorithm of the above example, you just need to replace the text() method with html() method to see the use of html() method to retrieve stored value.
Example
In the below example, we retrieve the value stored in the div element with the help of html() method. We can clearly see, that the value inside the div with nested elements is returned with some line breaks, which was not in the case of text() method.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.contain {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: gold;
}
.container {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: aqua;
}
</style>
</head>
<body>
<h2> Retrieving stored value from div element using jQuery </h2>
<div class = "contain"> Direct text inside a single div element. </div>
<div class = "container">
<h4> Heading of the nested div element. </h4>
</div>
<p class = "result"> </p>
<script>
var result = $('.result');
var singleDivText = $('.contain').html();
var nestedDivText = $('.container').html();
result.html(" The direct text inside the single div is: <b> " + singleDivText + " </b> </br> The text inside the nested div element without trimming the extra white space is: <b> " + nestedDivText + " </b> ");
</script>
</body>
</html>
Conclusion
In this article, we have discussed, how we can retrieve the value stored inside a div element with the help of the html() method and the text() method. We have seen, how both the methods can help us to retrieve the stored value by implementing the practically with the help of code examples for each one of them.