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.

Answer 1

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

Answer 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