How jQuery stores data related to an element ?
Last Updated :
26 Jul, 2024
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.
In this article, we see how to store data related to an HTML element using jQuery, along with understanding its implementation through the examples.
This task can be accomplished with the help of data() method in jQuery. The data() is an inbuilt method that store the arbitrary data related to the matching elements or the value for the named data will be returned, which contains the first element in the set of matching elements.
Syntax:
$(selector).data(element);
Approach: Here, the jQuery stores the data to an HTML div element. Two buttons are available, one of which attaches data to the div element with the "divID" id. Another button retrieves data showing it in another HTML div namely with id "resultID".
Example 1: The following example illustrates the jQuery storing the name of the data & then retrieving it for the selected element.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#btnID1").click(function() {
$("#divID").data("data1", "value1");
$("#divID").show().html("Data is attached to div<br>");
});
$("#btnID2").click(function() {
var resultData = $("#divID").data("data1");
$("#resultID").show().html(
"<b>You retrieved value is:</b> "
+ resultData);
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
jQuery storing of Data related to an element
</h3><br/>
<div id="divID"> </div>
<button id="btnID1">
Attach data to div element
</button>
<button id="btnID2">
Retrieve the attached data
</button><br/>
<div id="resultID"></div>
</body>
</html>
Output:
Example 2: The following example demonstrates the jQuery storing of data to an HTML div element using a JavaScript switch statement. The different buttons are available to get or set the values to HTML div element using data() method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div,
button,
p {
margin: 5px;
}
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
jQuery storing of Data related to an element
</h3>
<div id="resultID"></div>
<button>
Get "mydata" from the HTML div
</button>
<button>
Set "mydata" to "helloWorld" value
</button>
<br>
<button>
Set "mydata" to number 75
</button>
<p>
<b>The "mydata" value is:</b>
<span></span>
</p>
<script>
$("button").click(function() {
var value;
switch($("button").index(this)) {
case 0:
value = $("#resultID").data("mydata");
break;
case 1:
$("#resultID").data("mydata", "helloWorld");
value = "Stored";
break;
case 2:
$("div").data("blah", 75);
value = "Num stored";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>
Output:
Similar Reads
Data Storage and Querying in DBMS Database Management System is the collection of interrelated data/information or a set of programs that manages controls, and accesses the use of data. Through DBMS, users can manage the data efficiently in a database to increase accessibility and productivity. For example - Employee records and tel
4 min read
How to store data in the DOM ? 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
1 min read
jQuery Interview Questions and Answers | Set-3 We have already discussed some jQuery interview questions. jQuery Interview Questions and Answers | Set-1jQuery Interview Questions and Answers | Set-2 Below are some more related questions: What is method chaining in jQuery ? What advantages does it offer ? Method chaining is a feature of jQuery th
5 min read
jQuery Interview Questions and Answers | Set-3 We have already discussed some jQuery interview questions. jQuery Interview Questions and Answers | Set-1jQuery Interview Questions and Answers | Set-2 Below are some more related questions: What is method chaining in jQuery ? What advantages does it offer ? Method chaining is a feature of jQuery th
5 min read
Selectors in jQuery The selector in jQuery is a function that selects nodes i.e. elements from the Document Object Model. In simple words, the selector is a function that is used to select/manipulate one or more HTML elements using jQuery. It plays a significant role in jQuery. With the help of a selector, we can selec
4 min read
Top 50+ jQuery Interview Questions and Answers - 2025 jQuery, a fast and lightweight JavaScript library, has been a game-changer in simplifying front-end web development known for its simplicity, ease of use, and cross-browser compatibility. In this article, we will provide the Top 50+ jQuery Interview Questions 2025 tailored for both freshers and expe
15+ min read