How to set data attributes in HTML elements

Question

I have a div with an attribute data-myval = "10". I want to update its value; wouldn't it change if I use div.data('myval',20)? Do I need to use div.attr('data-myval','20') only?

Am I getting confused between HTML5 and jQuery? Please advise. Thanks!

EDIT: Updated div.data('myval')=20 to div.data('myval',20), but still the HTML is not updating.

div.data('myval')=20 wouldn't work to store a value only because the syntax is wrong - see the answers for the correct syntax. But note that .data() doesn't actually update the element attribute, it stores the data elsewhere. — nnnnnn
– nnnnnn, Commented Nov 23, 2012 at 6:40
For those who has the sense to avoid gQuery use this -> div.dataset.myval = '20'; — Harijs Krūtainis
– Harijs Krūtainis, Commented Jun 9, 2020 at 13:00
I feel bad saying this, but IMHO, users should completely ignore the highest voted answer and read one of the others. After over an hour of troubleshooting why data() didn't work as expected (for the nth time in my career), I finally decided to get to the bottom of it. I documented my findings in my own answer, but to summarize, data probably doesn't work the way you expect. attr probably does work the way you expect. Use attr. — Daniel Kaplan
– Daniel Kaplan, Commented Apr 7, 2024 at 8:17

Roko C. Buljan · Accepted Answer · 2022-06-09 13:38:17Z

663

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Demo

Reference

From the reference:

jQuery itself uses the .data() method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.

It should be noted that jQuery's data() doesn't change the data attribute in HTML.

So, if you need to change the data attribute in HTML, you should use .attr() instead.

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

jQuery:

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

See this demo

edited Jun 9, 2022 at 13:38

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Nov 23, 2012 at 6:32

Jashwant

29.2k16 gold badges76 silver badges110 bronze badges

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

9 Comments

Jashwant Over a year ago

I dont know what consistency you need, but I would recommend to use data() to get and set HTML-5 data attributes.

Niki Romagnoli Over a year ago

@Jashwant might be a useful edit instead: think of a css rule like [data-myval="10"]{ color: red; }, it would style the tag according to value of data attribute.

Gaucho Over a year ago

.data doesn't work. .attr works. may be we can edit the answer to make it clear. it seems the first one is the solution, while it could be a little bit better exposed. i'm not sure about how to better explain, this is the reason why I don't edit the post.

Ilias Over a year ago

@Gaucho .data will only work if you use newer jQuery >= 1.4.3, for older versions .attr will work.

Franchy Over a year ago

>> Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr. api.jquery.com/data

|

informatik01 · Accepted Answer · 2024-09-19 22:15:16Z

68

Vanilla JavaScript solution

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

Using DOM's getAttribute() property

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely

Using JavaScript's dataset property

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute

edited Sep 19, 2024 at 22:15

informatik01

16.5k11 gold badges82 silver badges112 bronze badges

answered Nov 23, 2012 at 7:47

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Comments

Baqer Naqvi · Accepted Answer · 2017-07-06 13:12:35Z

58

You can also use the following attr thing;

HTML

<div id="mydiv" data-myval="JohnCena"></div>

Script

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

OR

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

edited Jul 6, 2017 at 13:12

answered Aug 16, 2016 at 17:12

Baqer Naqvi

6,5703 gold badges54 silver badges71 bronze badges

2 Comments

Zariweya Over a year ago

For me worked only with .attr. Is that even possible?

Baqer Naqvi Over a year ago

I am glad it worked. The .data() call is special - not only does it retrieve HTML5 data attributes it also attempts to evaluate/parse the attributes. So with an attribute like data-myval='{"hello":"world"}' when retrieved via .data() will return an Object while retrieval via .attr() will return a string.

Kirby · Accepted Answer · 2015-10-15 20:53:26Z

36

Please take note that jQuery .data() is not updated when you change html5 data- attributes with javascript.

If you use jQuery .data() to set data- attributes in HTML elements you better use jQuery .data() to read them. Otherwise there can be inconsistencies if you update the attributes dynamically. For example, see setAttribute(), dataset(), attr() below. Change the value, push the button several times and see the console.

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

edited Oct 15, 2015 at 20:53

Kirby

16k11 gold badges97 silver badges110 bronze badges

answered Sep 24, 2014 at 17:25

Johann Echavarria

9,9754 gold badges28 silver badges32 bronze badges

3 Comments

Daniel Kaplan Over a year ago

I feel like I should know this, but how do you know if you are using html5 data- attributes?

Johann Echavarria Over a year ago

@DanielKaplan when you use a data- attribute in the HTML developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

Daniel Kaplan Over a year ago

So a non-html5 data- attribute does not exist. Gotcha.

BEingprabhU · Accepted Answer · 2020-03-05 15:54:23Z

19

To keep jQuery and the DOM in sync, a simple option may be

$('#mydiv').data('myval',20).attr('data-myval',20);

edited Mar 5, 2020 at 15:54

BEingprabhU

1,7162 gold badges23 silver badges30 bronze badges

answered Jan 29, 2020 at 15:02

J. McNerney

6466 silver badges16 bronze badges

1 Comment

Astm Over a year ago

$('#mydiv').attr('data-myval',20); this working well

Blender · Accepted Answer · 2012-11-23 06:31:45Z

8

If you're using jQuery, use .data():

div.data('myval', 20);

You can store arbitrary data with .data(), but you're restricted to just strings when using .attr().

answered Nov 23, 2012 at 6:31

Blender

300k55 gold badges462 silver badges511 bronze badges

13 Comments

nnnnnn Over a year ago

Note that the .data() method does not update data- attributes - that is, the data it stores does not end up in an attribute (which is why it can store non-string values) even though it can retrieve the value from a data- attribute. Though I suspect the OP doesn't really need to set attributes even though that's what the question asked.

nnnnnn Over a year ago

I don't think it would be a problem (besides what you mentioned, or if there is other code that uses .attr() to retrieve the attribute). I just thought it was worth pointing out given that the OP explicitly (if perhaps mistakenly) asked about updating attributes.

Pulkit Mittal Over a year ago

@Blender this doesn't really answer my question. I want to update the HTML, but at the same time, use element.data('myval') to retrieve it as well.

Pulkit Mittal Over a year ago

I need to do that because the elements generated on document load have those as data-attributes, and I want to do so for the new dynamic elements as well. I know there might be not a specific need for that, but I want to keep a consistency.

nnnnnn Over a year ago

@PulkitMittal - Note that even with .attr() you're not really updating "the html", you're updating the DOM. When you ask the browser to give you the "html" (whether by .html() or the DOM element.innerHTML) the browser is effectively regenerating it for you based on the state of the DOM at the time. Sort of.

|

Cody · Accepted Answer · 2017-12-17 08:10:25Z

8

[jQuery] .data() vs .attr() vs .extend()

The jQuery method .data() updates an internal object managed by jQuery through the use of the method, if I'm correct.

If you'd like to update your data-attributes with some spread, use --

$('body').attr({ 'data-test': 'text' });

-- otherwise, $('body').attr('data-test', 'text'); will work just fine.

Another way you could accomplish this is using --

$.extend( $('body')[0].dataset, { datum: true } );

-- which restricts any attribute change to HTMLElement.prototype.dataset, not any additional HTMLElement.prototype.attributes.

edited Dec 17, 2017 at 8:10

answered Dec 17, 2017 at 7:38

Cody

10.1k4 gold badges65 silver badges48 bronze badges

Comments

Daniel Kaplan · Accepted Answer · 2024-10-22 22:51:06Z

TL;DR: div.attr('data-myval', 20)

Depending on your needs and your jQuery version, the highest voted answer might work, but you are better off using attr(`data-myval`)/attr(`data-myval`, newVal) because it'll always do what you expect:

jQuery `attr()` test

The attr(`myval`, val) setter modifies the HTML.
The attr(`myval`) getter returns the value of the HTML attribute.

let $div = $(`#jquery-3-7-1`);
console.log(`Using attr() in jquery 3.7.1`);
console.log("  HTML =", $div[0].outerHTML);
console.log("\t$div.attr(`data-myval`) // = ", $div.attr(`data-myval`));
console.log("  Running $div.attr(`data-myval`, '20');")
$div.attr(`data-myval`, '20');
console.log("\t$div.attr(`data-myval`) // = ", $div.attr(`data-myval`));
console.log("  HTML =", $div[0].outerHTML);
console.log(`\n`);
$.noConflict(true);

$div = $(`#jquery-1-4-3`);
console.log(`Using attr() in jquery 1.4.3`);
console.log("  HTML =", $div[0].outerHTML);
console.log("\t$div.attr(`data-myval`) // = ", $div.attr(`data-myval`));
console.log("  Running $div.attr(`data-myval`, '20');")
$div.attr(`data-myval`, '20');
console.log("\t$div.attr(`data-myval`) // = ", $div.attr(`data-myval`));
console.log("  HTML =", $div[0].outerHTML);
console.log(`\n`);
$.noConflict(true);

$div = $(`#jquery-1-4-2`);
console.log(`Using attr() in jquery 1.4.2`);
console.log("  HTML =", $div[0].outerHTML);
console.log("\t$div.attr(`data-myval`) // = ", $div.attr(`data-myval`));
console.log("  Running $div.attr(`data-myval`, '20');")
$div.attr(`data-myval`, '20');
console.log("\t$div.attr(`data-myval`) // = ", $div.attr(`data-myval`));
console.log("  HTML =", $div[0].outerHTML);
console.log(`\n`);
$.noConflict(true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="jquery-1-4-2" data-myval="10"></div>
<div id="jquery-1-4-3" data-myval="10"></div>
<div id="jquery-3-7-1" data-myval="10"></div>

jQuery `data()` test

data(...), on the other hand, probably doesn't do what you want:

The data(`myval`, val) setter does not modify the HTML.
In jQuery <= 1.4.2, the data(`myval`) getter ignores HTML attributes.

let $div = $(`#jquery-3-7-1`);
console.log(`Using data() in jquery 3.7.1`);
console.log("  HTML =", $div[0].outerHTML);
console.log("\t$div.data(`myval`) // =", $div.data(`myval`));
console.log("  Running $div.data(`myval`, '20');")
$div.data(`myval`, '20');
console.log("\t$div.data(`myval`) // =", $div.data(`myval`));
console.log("  HTML =", $div[0].outerHTML, `<-------- !!! data-myval is still 10`);
console.log(`\n`);
$.noConflict(true);

$div = $(`#jquery-1-4-3`);
console.log(`Using data() in jquery 1.4.3`);
console.log("  HTML =", $div[0].outerHTML);
console.log("\t$div.data(`myval`) // =", $div.data(`myval`));
console.log("  Running $div.data(`myval`, '20');")
$div.data(`myval`, '20');
console.log("\t$div.data(`myval`) // =", $div.data(`myval`));
console.log("  HTML =", $div[0].outerHTML, `<-------- !!! data-myval is still 10`);
console.log(`\n`);
$.noConflict(true);

$div = $(`#jquery-1-4-2`);
console.log(`Using data() in jquery 1.4.2`);
console.log("  HTML =", $div[0].outerHTML);
console.log("\t$div.data(`myval`) // =", $div.data(`myval`), `<-------- !!!`);
console.log("  Running $div.data(`myval`, '20');")
$div.data(`myval`, '20');
console.log("\t$div.data(`myval`) // =", $div.data(`myval`));
console.log("  HTML =", $div[0].outerHTML, `<-------- !!! data-myval is still 10`);
console.log(`\n`);
$.noConflict(true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="jquery-1-4-2" data-myval="10"></div>
<div id="jquery-1-4-3" data-myval="10"></div>
<div id="jquery-3-7-1" data-myval="10"></div>

This comment on the highest voted answer gives an explanation as to why, but I haven't confirmed it to be historically accurate.

In summary, use attr instead of data.

user22392244 · Accepted Answer · 2024-10-14 13:04:24Z

0

This doesn't work for me. There is some DOM thing so that .data("option", "value) doesn't work. It is only an internal storage process, unable to affect the data-value attr of the element. If you want future access, I prefer using .attr("data-option", "value"). That will be much better.

answered Oct 14, 2024 at 13:04

user22392244

Collectives™ on Stack Overflow

How to set data attributes in HTML elements

9 Answers 9

9 Comments

Vanilla JavaScript solution

HTML

JavaScript:

Comments

2 Comments

3 Comments

1 Comment

13 Comments

[jQuery] .data() vs .attr() vs .extend()

Comments

jQuery `attr()` test

jQuery `data()` test

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

9 Comments

Vanilla JavaScript solution

HTML

JavaScript:

Comments

2 Comments

3 Comments

1 Comment

13 Comments

[jQuery] .data() vs .attr() vs .extend()

Comments

jQuery attr() test

jQuery data() test

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

jQuery `attr()` test

jQuery `data()` test