Adding custom data attribute for a new node in Jquery does not work

Question

I tried to use the method data (jQuery 1.7.1) in this code:

var q = '<div class="form-error-marker"></div>';
var t = $(q).data('message', message).insertAfter(el);

and it does not work.

Note that this works:

var t = $(q).attr('data-message', message).insertAfter(el);

Why does the first variant not work?

EDIT: insertAfter works correctly and new div is added after el (which is instance of one element which I get by getElementById() function; long story short I have a library that I extend).

When I say 'it does not work' I mean that the attribute 'data-message' is not stored.

What does "doesn't work" mean? Does el contain more than one element? — SLaks
– SLaks, Commented Dec 25, 2011 at 19:35

Adam Rackis · Accepted Answer · 2011-12-25 19:44:47Z

7

Using data like that sets an arbitrary piece of data for this node; it doesn't add a new data- attribute. Just add the attribute with the attr function, and then access it with data

var q = $('<div class="form-error-marker"></div>').attr("data-message", message);

Now access it like this:

var message = q.data("message");

Here's a fiddle

edited Dec 25, 2011 at 19:44

answered Dec 25, 2011 at 19:39

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MartyIX Over a year ago

"Using data like that sets an arbitrary piece of data for this node" I don't understand this sentence. What does it mean? Thanks!

Adam Rackis Over a year ago

@MartyIX - check out the docs for the data function api.jquery.com/data Basically, you can attach arbitrary data to any dom element with data('key', 'value'). You can retrieve these values by saying .data('key'); As of jQuery 1.4.3, saying .data('key') would not only look for previously set values set with .data('key', 'value') but would also look in html5 data attributes

Popnoodles Over a year ago

This is not how data() should be used. OP's code works. The error was elsewhere or he/she is trying to access attr('data-message') after setting data, which is also wrong.

Adam Rackis Over a year ago

@popn - I've read your comment three times now and I have yet to make sense of it. OP clearly thought .data would add an attribute, which I explained was incorrect. Apparently he agreed since he saw fit to accept my answer. And yes, .data CAN be used to read a data- attribute; I'm not sure why you think otherwise.

Popnoodles Over a year ago

While you may set and get using attr(), you may as well use attr('whatever') instead of attr('data-whatever'). The code OP gave worked, he/she was using $.data() correctly. Now he/she is not.

Andrey Nikishaev · Accepted Answer · 2011-12-25 21:56:44Z

2

When you use jQuery.data you don't change element attributes, instead your data saved in $.cache. So if you want to change element attributes use jQuery.attr, when you want to save some info use jQuery.data

answered Dec 25, 2011 at 21:56

Andrey Nikishaev

3,9025 gold badges42 silver badges58 bronze badges

Collectives™ on Stack Overflow

Adding custom data attribute for a new node in Jquery does not work

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related