1for javascript :
2webappData.getAttribute('data-id');
3document.querySelector('#elementId').dataset.id = 'value';
4
5for jquery :
6$(element).attr('data-key', 'value');
1const article = document.querySelector('#electric-cars');
2
3article.dataset.columns // "3"
4article.dataset.indexNumber // "12314"
5article.dataset.parent // "cars"
1<article
2 id="voitureelectrique"
3 data-columns="3"
4 data-index-number="12314"
5 data-parent="voitures">
6...
7</article>
8var article = document.getElementById('voitureelectrique');
9
10article.dataset.columns // "3"
11article.dataset.indexNumber // "12314"
12article.dataset.parent // "voitures"
1//html file
2<div id="user" data-user-id="2" data-user-date-of-birth="03/03/1993">
3 <p> Hello ! </p>
4</div>
5
6//js file
7const user = document.getElementById('user')
8
9console.log(user.dataset.userId) // => 2
10
11console.log(user.dataset.userDateOfBirth) // => '03/03/1993'
1const el = document.querySelector('#user');
2
3// el.id === 'user'
4// el.dataset.id === '1234567890'
5// el.dataset.user === 'johndoe'
6// el.dataset.dateOfBirth === ''
7
8// set a data attribute
9el.dataset.dateOfBirth = '1960-10-03';
10// Result: el.dataset.dateOfBirth === '1960-10-03'
11
12delete el.dataset.dateOfBirth;
13// Result: el.dataset.dateOfBirth === undefined
14
15if ('someDataAttr' in el.dataset === false) {
16 el.dataset.someDataAttr = 'mydata';
17 // Result: 'someDataAttr' in el.dataset === true
18}
19