If I have a DOM element
<div id="myDiv"></div>
and I call
$("#myDiv").data("id", 1)
I might expect it to be updated like so:
<div id="myDiv" data-id="1"></div>
But that’s not how jQuery’s .data() method works. It attaches the data to the element in its internal data store, but it doesn’t update the DOM element itself.
If I want to set the actual attribute in the HTML, I have to call
$("#myDiv").attr("data-id", 1);
In either case, though, jQuery’s .data() method can read the value like this:
var value = $("#myDiv").data("id")
It gives precedence to its internal data store, but will fall back to a data-whatever property on the DOM node, if it’s there.
and I call $("#myDiv").data("id", 1) I might expect it to be updated like so: But that's not how jQuery's .data() method works. It attaches the data to the element in its internal data store," data-image="" data-button="none">