Storing Metadata on DOM Nodes
In this page:
What is data()?
The data() method attaches arbitrary JavaScript values to a DOM element without writing them into visible HTML attributes, storing them in an internal cache tied to that element instead. This keeps application state associated with the right element without cluttering the markup or exposing it in the page source.
Example: What is data()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("userId", 42);
</script>
</body>
</html>Read Data
Use data() with a key to read back stored information, and the value can be a string, number, object, array, or virtually any other JavaScript value — not just text, unlike a plain HTML data-* attribute. This makes it possible to attach rich structured data, like an entire object, directly to an element.
Example: Read Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("userId", 42);
console.log($("#card").data("userId"));
</script>
</body>
</html>Store Multiple Values
You can store more than one piece of metadata on the same DOM element by calling data() with different keys, effectively giving that element its own small collection of custom properties. This is useful when a single element needs to track several unrelated pieces of state at once, like both a status and a timestamp.
Example: Store Multiple Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("userId", 42);
$("#card").data("status", "active");
console.log($("#card").data());
</script>
</body>
</html>Remove Stored Data
The removeData method deletes previously stored metadata from an element, which is useful once that information is no longer relevant — for example, clearing a loading flag once a request finishes. Leaving stale data attached can lead to confusing bugs if old state is accidentally read later.
Example: Remove Stored Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card</div>
<script>
$("#card").data("loading", true);
$("#card").removeData("loading");
</script>
</body>
</html>Small data() Project
Attaching hidden metadata this way is especially useful for buttons, product cards, and other repeated UI elements where each instance needs to remember something — like an ID or a status — without adding extra visible markup or custom attributes for every piece of state.
Example: Small data() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button class="product" data-id="7">Buy</button>
<script>
$(".product").on("click", function() {
console.log("Product ID:", $(this).data("id"));
});
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: