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.
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...