data
doesn’t set data-*
attributes. It manages a data cache unrelated to data-*
attributes. It initializes from data-*
attributes if there are any present, but never writes to them. To write to an attribute, use attr
.
Example: Updated Fiddle
var div = $("<div />")
$(div).attr("data-foo", "bar")
console.log($(div)[0].outerHTML)
What you’re seeing is just one of the many ways this can be surprising. Another is that if your markup is <div id="elm" data-foo="bar"></div>
and at some point you use $("#elm").data("foo")
to get the value (and it will indeed be "bar"
), then you do $("#elm").data("foo", "update")
, the attribute remains data-foo="bar"
but the data managed by data
now has foo
equal to "update"
. But the rule above explains it: data
never writes to data-*
attrs.