How to set data attributes in HTML elements
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
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
Vanilla Javascript solution
HTML
<div id="mydiv" data-myval="10"></div>
JavaScript:
Using DOM's
getAttribute()
propertyvar 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
propertyvar myval = mydiv.dataset.myval //returns "10" mydiv.dataset.myval = '20' //changes "data-myval" to "20" mydiv.dataset.myval = null //removes "data-myval" attribute