Add data attribute to element in JavaScript
Question:
How to add data attribute to element in JavaScript? Answer:
element.dataset.id = 123;
Description:
The data-*
attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.
You can get or set a data attribute through the dataset object in JavaScript like this:
// Reading data-id attribute
const id = myElement.dataset.id;
// Set data-event attribute
myElement.dataset.event = 'ADD';
Reference:
The dataset reference
Share "How to add data attribute to element in JavaScript?"
Related snippets:
- Create HTML element with attributes in JavaScript
- Get element by ID in React
- Set the required attribute in JavaScript
- Get elements by data attribute in JavaScript
- Add class to the clicked element in JavaScript
- Add class to multiple elements in JavaScript
- Add class to element if it does not already exists with JavaScript
- Add data attribute to element in JavaScript
- Add CSS class to body with JavaScript
- Add class to parent element in JavaScript
- Toggle fullscreen and normal mode with JavaScript
- Play video in fullscreen with vanilla JavaScript
- Select HTML elements by CSS selectors in vanilla JavaScript
- Exit from fullscreen mode on click in JavaScript
- Switch browser to fullscreen mode with JavaScript
- Get the value of text input field in JavaScript
- Get element with data- attribute using vanilla JavaScript
- Get the value of selected radio button in JavaScript
- Get selected option from select using JavaScript
- Check if element is hidden in JavaScript
Tags:
add, set, data, attribute, element, tag, div, vanilla, javascript Technical term:
Add data attribute to element in JavaScript