JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

JavaScript

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';

// 'someDataAttr' in el.dataset === true
var a =Object.getOwnPropertyNames(el.dataset).map(function(e){return e+":"+el.dataset[e];});document.body.innerHTML += a.join('<br/>');