How jQuery stores data related to an element ?

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.

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.

Output: