for javascript :
webappData.getAttribute('data-id');
document.querySelector('#elementId').dataset.id = 'value';
for jquery :
$(element).attr('data-key', 'value');//html file
<div id="user" data-user-id="2" data-user-date-of-birth="03/03/1993">
<p> Hello ! </p>
</div>
//js file
const user = document.getElementById('user')
console.log(user.dataset.userId) // => 2
console.log(user.dataset.userDateOfBirth) // => '03/03/1993'const el = document.querySelector('#user');
// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''
// set a data attribute
el.dataset.dateOfBirth = '1960-10-03';
// Result: el.dataset.dateOfBirth === '1960-10-03'
delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined
if ('someDataAttr' in el.dataset === false) {
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true
}
<body>
<div id = "id_name" data-tagName = "value" data-tagName1 = "value">
Display Data
</div>
<script>
const variable_name = document.getElementById('id_name');
console.log(variable_name.dataset);
</script>
</body><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
const el = document.querySelector('#user');
// el.id === 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''