creating new elements with html5 data attributes defined in DOM

Question

I want to create a new element with html5 data attributes defined, however they are not showing in the DOM (unlike when using say .addClass). is this intended behavior?

this creates an element without the data-foo attributs:

-> $("<div>foo</div>").data('foo', 'bar').addClass('class')
=> <div class="class">foo</div>

i had to declare it in the constructor

-> $("<div data-foo='bar'>foo</div>").addClass('class')
=> <div class="class" data-foo="bar">foo</div>

shouldn't the .data method work do the same?

Answer 1

From here:

• http://www.learningjquery.com/2011/09/using-jquerys-data-apis

4 . No jQuery data API ever changes HTML5 data-* attributes.

Most uses of .data() and .removeData() are still for the original purpose of associating data with DOM elements in memory. Updating DOM attributes each time data was changed would slow things down for no good reason. Also, it's not even possible to serialize all data types that might be attached to a DOM element, such as functions, references to other DOM elements, or custom JavaScript objects.

Rule: To update or remove HTML5 data-* attributes, use jQuery's .attr() or .removeAttr() methods.

So, use the usual attr ...