Open In App

How to store data in the DOM ?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will learn to store data to DOM elements.

If we want to save some data in an HTML tag, we can use the jQuery .data() method to store data which can also be retrieved later by using the same method.

Syntax:

$(selector).data(name)
Attribute values:
  • name: It defines the name of the data to be stored and is an optional parameter.

Note: If no name is specified, the .data() method returns all stored data for that particular element. 

HTML code: Let us look at an example to understand how to store data to DOM using .data() method.

HTML 
<!DOCTYPE HTML>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
   
</head>

<body style="text-align:center;" id="body">
    <h2 style="color:green">GeeksforGeeks</h2>
    <p><b>Enter the value to store:</b></p>

    <input type="text" id="data" name="input"><br/>
    <br/>
    <button id="b1">Store entered data</button>
    <button id="b2">View data </button><br/><br/>
    <div id="display"></div>
  
    <script>
    $(document).ready(function(){
     // We are setting user data to data tag 
         $("#b1").click(function(){
         var d=($("#data").val());
         $("#data").data("userdata",d);
      });
      //Displaying data after accessing from data tag 
      $("#b2").click(function(){
         $("#display").html($("#data").data("userdata")) ;
        
      });
    });
   </script>
</body>
  
</html>

Output: 

data() method

F
faizamu19
Improve
Article Tags :

Explore

Lightbox