I need to update a div layer's dataset with javascript. The below code is working if the dataset has one dash e.g. data-myvar...

<div id="myDiv" data-myvar="10">

var theDiv = document.getElementById("myDiv");
theDiv.className = 'newClass';
theDiv.dataset.myvar  = '20';
theDiv.appendChild(content); 

gives the result

<div id="myDiv" data-myvar="20" class="newClass">

works great, but when I have a dataset such as data-myvar-list it doesn't work. I have tried for example

theDiv.dataset.myvar.list  = '20';

And this which gives a syntex error

theDiv.dataset.myvar-list  = '20';

any ideas?

Thanks

I need to update a div layer's dataset with javascript. The below code is working if the dataset has one dash e.g. data-myvar...

<div id="myDiv" data-myvar="10">

var theDiv = document.getElementById("myDiv");
theDiv.className = 'newClass';
theDiv.dataset.myvar  = '20';
theDiv.appendChild(content); 

gives the result

<div id="myDiv" data-myvar="20" class="newClass">

works great, but when I have a dataset such as data-myvar-list it doesn't work. I have tried for example

theDiv.dataset.myvar.list  = '20';

And this which gives a syntex error

theDiv.dataset.myvar-list  = '20';

any ideas?

Thanks

• javascript
• html
• dataset

2 Answers 2

You could also use theDiv.dataset.myvarList , the dash gets replaced by camel-case.

dash-style to camelCase: A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules

• the prefix data- is removed (including the dash);
• for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;
• other characters (including other dashes) are left unchanged.

You can read more about it here --> source - MDN

Check out the following snippet

var theDiv = document.getElementById("myDiv");
theDiv.className = 'newClass';
console.log(theDiv.dataset.myvarList);

<div id="myDiv" data-myvar-list="20" class="newClass">

Use the setAttribute() function to acplish this:

theDiv.setAttribute('data-myvar-list','20');

but you might better consider not using the dash and just go with the dataset()

dataset is a native property of an element that contains the data attributes, it's a new(ish) addition and as such is only supported in IE11+, Chrome 8+, FF 6+ etc.

According to this JsPerf

https://jsperf./html5-dataset-vs-native-setattribute

The setattribute() method is actually faster by about 25%.