Set data attribute on div with js

Question

I've got a bunch of div.textBox that I want to apply data attribute to it.

Here's what I want to end up with :

<div class="text" data-stellar-ratio="2">

I've tried :

document.getElementByClassName('text').dataset.stellar.ratio = "2";

But it's not working...

Help!

Answer 1

As documented

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).

More precisely, a NodeList is returned and can be accessed as an array. The first element the selector finds is accessed via index 0.

document.getElementsByClassName('text')[0].setAttribute('data-stellar-ratio', '2')

Answer 2

You can add data attribute to any element in html using the following statement:

$('#id_of_element').attr('data-id', 'your_value');

It will render as follows for a div:

<div data-id="your_value">