Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to store data in the DOM ?

  • Last Updated : 18 May, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
    </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




My Personal Notes arrow_drop_up
Recommended Articles
Page :