Adding data attribute to DOM

Question

$('div').data('info', 1);

alert($('div').data('info'));
//this works    

$('div[data-info="1"]').text('222');
//but this don't work

I'm creating element within jquery. After that, I want to add attribute "data". He's like and is added, but in the DOM, this is not apparent, and I can't get the item, using

$('div[data-example="example"]').html()

jsfiddle

Elaterite

Answer 1

Use the .data() method:

$('div').data('info', '222');

Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr():

$('div').attr('data-info', '222');

Chopping

@Luntegg: Use .data() unless you actually have a reason to use .attr(). – Chopping

.data() don't work. It don't add data-attribute to DOM, and I don't get element by data-attribute.. – Elaterite

It also has to be a string - $('div').attr('data-info', ''+info.id) – Nickell

seems like .data(key, val) would create the attr. anyone know why it does not? – Consistent

Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr(): This was the key to my problem. Thanks a lot. – Sophomore

Answer 2

jQuery's .data() does a couple things but it doesn't add the data to the DOM as an attribute. When using it to grab a data attribute, the first thing it does is create a jQuery data object and sets the object's value to the data attribute. After that, it's essentially decoupled from the data attribute.

Example:

<div data-foo="bar"></div>

If you grabbed the value of the attribute using .data('foo'), it would return "bar" as you would expect. If you then change the attribute using .attr('data-foo', 'blah') and then later use .data('foo') to grab the value, it would return "bar" even though the DOM says data-foo="blah". If you use .data() to set the value, it'll change the value in the jQuery object but not in the DOM.

Basically, .data() is for setting or checking the jQuery object's data value. If you are checking it and it doesn't already have one, it creates the value based on the data attribute that is in the DOM. .attr() is for setting or checking the DOM element's attribute value and will not touch the jQuery data value. If you need them both to change you should use both .data() and .attr(). Otherwise, stick with one or the other.

Limousin

Answer 3

in Jquery "data" doesn't refresh by default :

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());

You'd use "attr" instead for live update:

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());

Endomorphism

You'd use "attr" instead for live update: var a = $('#mydiv').attr('data-myval'); //getter – Dominick

Answer 4

Using .data() will only add data to the jQuery object for that element. In order to add the information to the element itself you need to access that element using jQuery's .attr or native .setAttribute

$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);

In order to access an element with the attribute set, you can simply select based on that attribute as you note in your post ($('div[data-info="1"]')), but when you use .data() you cannot. In order to select based on the .data() setting, you would need to use jQuery's filter function.

jsFiddle Demo

$('div').data('info', 1);
//alert($('div').data('info'));//1

$('div').filter(function(){
   return $(this).data('info') == 1; 
}).text('222');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>

Tangency

Perfect solution. Even using a unique selector of jQuery if you put this zero after jQuery selector, it works really well. Thanks a lot! $("#element")[0].setAttribute('data-info', 1); – Stenophyllous

Answer 5

 $(document.createElement("img")).attr({
                src: 'https://graph.facebook.com/'+friend.id+'/picture',
                title: friend.name ,
                'data-friend-id':friend.id,
                'data-friend-name':friend.name
            }).appendTo(divContainer);

Freedwoman

Perhaps you could explain what is going on in your code, to help others. – Nerves

Answer 6

to get the text from a

<option value="1" data-sigla="AC">Acre</option>

uf = $("#selectestado option:selected").attr('data-sigla');

Meredithmeredithe