Different results by attr and data

Question

<p id="getMessage" data-sid="158">
  <strong>Name</strong> : Rahul Kumar<br>
  <strong>Total </strong> : 25<br>
</p>

This is my dynamically generated HTML using jQuery

Now this is stable and fix

I executed several commands in Consol and found these results

$('#getMessage').attr('data-sid');
"158"

This is as expected.

But when I execute this

$('#getMessage').data('sid');
160

It shows 160, it should be 158 right ?

I used $('#getMessage').attr('data-sid', result.studentDetails.SID); to set it.

a simple test will show you that it returns the same result, you might have something else going on in your code... — WalksAway, Jul 26 '16 at 08:34
The results are the same, see https://jsfiddle.net/syjtqp30/. Do you have another element with the id getMessage on your page? — Sam, Jul 26 '16 at 08:35
Works great for me: http://output.jsbin.com/pesoki Maybe something else overide this value. — Mosh Feu, Jul 26 '16 at 08:35
you can show us working demo of not working. It should work. — Parth Trivedi, Jul 26 '16 at 08:35
@Vohuman this is a different question and I found the answer too see the comments in Jamiec answer. — Rahul Kumar, Jul 26 '16 at 08:45
@RahulKumar This isn't a different question. This _is_ a duplicate. — Ram, Jul 26 '16 at 08:49

score 3 · Accepted Answer · answered Jul 26 '16 at 08:34

3

.attr will read the actual attribute.

.data will read the current value of that data item. If you have code which has changed the value (ie, $('#getMessage').data('sid',160)) that will be the current value.

answered Jul 26 '16 at 08:34

Jamiec

133,658
13
134
193

If it is updated. It will update in HTML too right ? – Rahul Kumar Jul 26 '16 at 08:36
1

@RahulKumar absolutely not – Jamiec Jul 26 '16 at 08:36
@RahulKumar: It will update data property and not attribute value. And that is the reason it is not reflected in attributes. – Milind Anantwar Jul 26 '16 at 08:37
@RahulKumar for reflecting in html you need to use `attr()` method – Pranav C Balan Jul 26 '16 at 08:37
I used this to update my html $('#getMessage').attr('data-sid', result.studentDetails.SID); so first time it set data to 160 When second time I executed this it only changed my data attribute value not the actual data right? – Rahul Kumar Jul 26 '16 at 08:38
@RahulKumar as others have said, if updating the html was your goal you should use `.attr`. If storing/updating some arbitrary data in an element use `.data` – Jamiec Jul 26 '16 at 08:40
My Goal was to update data so I should use .data instead of attr – Rahul Kumar Jul 26 '16 at 08:43
Yes, but then dont expect your html to reflect the change! – Jamiec Jul 26 '16 at 08:44

score 0 · Answer 2 · answered Jul 26 '16 at 08:36

The data() function stores data to a specific element

Store arbitrary data associated with the specified element and/or return the value that was set.

jQuery.data($('#element'), data);

On the other hand, attr() gets or sets attributes form the element.

$('div').attr('data-test', 'test');

<div data-test="test"></div>

score 0 · Answer 3 · answered Jul 26 '16 at 08:37

as requested a working example..., notice that i can change the value of the data attribute without changing the actual attribute

console.log($('#getMessage').attr('data-sid'));
console.log($('#getMessage').data('sid'));

$('#getMessage').data('sid', 160);

console.log($('#getMessage').attr('data-sid'));
console.log($('#getMessage').data('sid'));

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

<p id="getMessage" data-sid="158">
  <strong>Name</strong> : Rahul Kumar
  <br>
  <strong>Total </strong> : 25
  <br>
</p>

Different results by attr and data

3 Answers3