Open In App

How to retrieve stored value from div element using jQuery ?

Last Updated : 10 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to retrieve the stored value from any division element using jQuery. This can be used in situations where the value of the division element has to be manipulated or used as per requirements.

Approach 1: We will be using the jQuery data() ,first(), last() and text() methods. We attach or store the data of the division element using the data() method which contains two parameters. The first parameter is the name of the data of the division element and the second parameter is an object literal which consists of two key-value pairs. The value of the first key is “Geeks” and the value of the last key is “GFG“. 

Now there are two span elements defined inside the division element which will store the retrieved value. We select the first span element using the first() method and we select the last span element using the last() method. We set their values using the text() method which consists of a single parameter. For the first span element, the value is set to the value of the first key of the object literally defined inside the division element’s data method. Similarly, for the second span element, the value is set to the value of the second key of the object literal.

Example: In this example, we will use the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <script src=
    </script>
 
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
            font-size: 40px;
        }
 
        div,
        p {
            font-size: 20px;
            font-weight: bold;
        }
 
        span {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
 
    <p>
        jQuery - Retrieve the stored value
        from a division element
    </p>
 
    <!-- The division element -->
    <div>The values which were stored were
        <span></span> and <span></span>
    </div>
 
    <script type="text/javascript">
 
        // Set the value to be stored
        $("div").data("GeeksForGeeks", {
            firstKey: "Geeks",
            lastKey: "GFG"
        });
 
        // Get the stored value
        $("span").first().text($("div")
            .data("GeeksForGeeks").firstKey);
 
        $("span").last().text($("div")
            .data("GeeksForGeeks").lastKey);
    </script>
</body>
</html>


Output:

Approach 2: We will be using the jQuery data() and html() methods. This approach is quite similar to the previous approach but the difference is that the html() method is used instead of the text() method. Both these methods return or set the content of the selected element but the html() method is nearly 2 times faster than the text() method. Also instead of two-span elements, there is only one span element that has the stored value. Thus, the second parameter of the data() method is not an object literal here but rather a simple number.

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <script src=
    </script>
 
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
            font-size: 40px;
        }
 
        div,
        p {
            font-size: 20px;
            font-weight: bold;
        }
 
        span {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksForGeeks</h1>
 
    <p>
        jQuery - Retrieve the stored value
        from a division element
    </p>
 
    <!-- The division element -->
    <div>The value which was stored was <span></span></div>
 
    <script type="text/javascript">
     
        // Set the value to be stored
        $("div").data("gfgValue", 1234);
         
        // Get the stored value
        $("span").html($("div").data("gfgValue"));
    </script>
</body>
</html>


Output:



Similar Reads

How to copy the content of a div into another div using jQuery ?
Given an HTML document containing some div element and the task is to copy a div content into another div as its child using jQuery. There are two approaches to solve this problem that are discussed below: Approach 1: First, select the div element which needs to be copied into another div element.Select the target element where the div element is c
2 min read
How to Make a Child Div Element Wider than Parent Div using CSS ?
When the child div element has a fixed width that is wider than the parent div element, it will display overflow outside of the parent element. Because the overflow is hidden by default, one approach is to utilize the overflow attribute to enable it on an element. Another approach includes setting the position property of the parent div element to
2 min read
How to overlay one div over another div using CSS
Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple to design. Overlays can create using two simple CS
2 min read
How to retrieve attribute of an HTML tag using jQuery ?
In this article, we will learn how do you retrieve attributes of an HTML tag using jQuery. We can use JQuery to make this done in a few lines of code. Here we are going to build an image zooming system where will see how can an attribute of the HTML tag can be retrieved and changed. Using the attr() method: This method can be either used to set the
2 min read
How to force child div to be 100% of parent div's height without specifying parent's height?
When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don't want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div elem
4 min read
How to center a div within another div?
The div tag is used to construct a division or section of an HTML document in which other elements of HTML is placed and that division/section works like a container whose CSS styling can be done as a single unit or javascript can be used to perform various tasks on that container. Syntax: &lt;div&gt; &lt;h3&gt;'This is a div of the web page.&gt;/h
4 min read
How to center a div on the edge of another div in SASS ?
In this article, we will see how to centre a div on the edge of another div using SASS. SASS is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. So that we can reuse the code. Centering a div on the edge of another div is not a difficult task. We can achieve it b
4 min read
How to make Parent Div Activate Styling of Child Div for Hover and Active ?
In this article, we will see how to make parent div activate styling of child div for hover and active. We can do this by using Pseudo-classes like hover and active. Approaches to make parent div activate styling of child div for hover and activeUsing Pure CSS: with pseudo-classesUsing CSS and JavaScript: without pseudo-classesMethod 1: Using Pure
2 min read
How to clear all div's content inside a parent div ?
In this article, we are given an HTML document containing div elements and the task is to remove the existing HTML elements using jQuery. To accomplish this task, we can use the following methods: Table of Content jQuery remove() methodjQuery empty() methodjQuery html() methodjQuery remove() methodThe remove() method in jQuery is used to remove the
2 min read
How to make div fixed after scroll to that div ?
In this article, we will see how to make a div fixed after you scroll to it by using the position property with a sticky value. This effect is generally used on websites when an important message needs to be shown. Set the property position to sticky to create elements that behave as fixed positions whenever the user scrolls to that position. Fixin
4 min read