Adding data attributes to elements not yet inserted into DOM in jquery

Question

So I'm basically adding some elements to the DOM on the fly. I can use method like .addClass on them before they exist, and the class is appended to the DOM along with the element, but when I use the .data() method to add a data attribute, the data isn't appended to the DOM with the element. Am I missing something here or do I really have to wait until the element exists in the DOM to add data to it?

PS. Using jquery 1.9.1

HERES A FIDDLE FOR YOU TO PLAY WITH

JS

var widget = $("<div>");
widget.addClass("banana");
widget.data('color', 'brown');
widget.appendTo('#container');

HTML

<div id="container">

</div>

And theres some nice css there so you know where to click to inspect and see the data attribute isn't(or hopefully is) added.

My expected result is

<div id="container">
    <div class="banana" data-color="brown"></div>
</div>

Cheers.

@RicardoLohmann when I inspect the element I don't see the data being added to it in the DOM — Rooster, Aug 19 '13 at 21:07
@RicardoLohmann but maybe thats just a weird jsfiddle quirk? — Rooster, Aug 19 '13 at 21:10
[relevant](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) — zzzzBov, Aug 19 '13 at 21:13
The `data` attr is not used to create nodes at your will. It simply corroborates the object data with the DOM. if you want to explicitly set something you have gotta use `attr` . Good Luck ! — The Dark Knight, Aug 19 '13 at 21:17

score 22 · Accepted Answer · answered Aug 19 '13 at 21:13

22

The .data() method does not create [data-*] attributes on DOM nodes. It simply associates the data object with the DOM node. It does initialize with values from [data-*] attributes if any exist, but this is not the same thing.

If you need to set an explicit [data-*] attribute value (such as a styling hook with CSS), then you need to use .attr()

answered Aug 19 '13 at 21:13

zzzzBov

174,988
54
320
367

ah. I see. After reading the link you posted and this answer I see why I was confused. I don't usually use the .data() in quite the way I'm using it here. thanks for doing my research for me! – Rooster Aug 19 '13 at 21:37

score 2 · Answer 2 · answered Aug 19 '13 at 21:03

2

This seems to work for me,

var widget = $("<div>");
widget.addClass("banana");
jQuery.data(widget, 'color', 'brown');
widget.appendTo('#container');
console.log(jQuery.data(widget));

Updated fiddle: http://jsfiddle.net/rTfvG/3/

answered Aug 19 '13 at 21:03

PherricOxide

15,493
3
28
41

when I inspect the element I don't see the data being added to it in the DOM still, but maybe thats a jsfiddle quirk> – Rooster Aug 19 '13 at 21:07
@Rooster, that's not a jsFiddle quirk. The data is in the DOM but not shown in the [data-*] attribute. – Fabian Nicollier Apr 13 '15 at 12:45

Adding data attributes to elements not yet inserted into DOM in jquery

2 Answers2