javascript - jQuery data(...) not stored in the DOM? -

if data-x in dom :

<div id="blah" data-x="143">hello</div> 

and modify

$('#blah').data('x', 13687) 

then seems data-x not modified in dom (use browser's inspect feature on snippet code below) :

is normal behaviour?

---

example:

console.log($('#blah').data('x'));  $('#blah').data('x', 13687)  console.log($('#blah').data('x'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <div id="blah" data-x="143">hello</div>

jquery's data() method does not set data attributes, stores data in internal object.
html5 data attributes automatically pulled in jquery's data object, means initial value of data object reflects whatever given in attribute, changing value data() will not update attribute, internal data object jquery uses.

so yes, it's normal attribute doesn't change, , it's supposed that.

if reason have change actual attribute, can use attr()

$('#blah').attr('data-x', 13687) 

note not needed if consistently use data() in code, , you're not using other scripts rely on data attribute.

you'll find more how attributes handled, , how jquery stores data, in docs