Set custom attribute using JavaScript

Question

I am using The DynaTree (https://code.google.com/p/dynatree) but I am having some problems and hoping someone can help..

I am displaying the tree on the page like below:

<div id="tree">
    <ul>
        <li class="folder">Outputs
            <ul>
                <li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title</li>
                <li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title</li>
                <li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title</li>
                <li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title</li>
            </ul>
        </li>
    </ul>
</div>

However I am trying to change the icon on a item no matter if it's selected or not only using JavaScript.

the new icon I want to use is base2.gif

I have tried using the following but it don't seem to work:

document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";

anyone know what I might be doing wrong?

the keyword `data` is a prefix. You should be using `data-you-attribute-name` — MilkyWayJoe, Jul 02 '12 at 00:28

David G · Answer 1 · 2012-07-02T00:28:34.080

241

Use the setAttribute method:

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

But you really should be using data followed with a dash and with its property, like:

<li ... data-icon="base.gif" ...>

And to do it in JS use the dataset property:

document.getElementById('item1').dataset.icon = "base.gif";

edited Jul 02 '12 at 00:28

answered Jul 02 '12 at 00:22

David G

94,763
41
167
253

9

The dataset property might be useful if only browsers compliant with HTML5 are considered, but that is a short list and wider support is required for the general web. I'd stick to using *setAttribute* for now. – RobG Jul 02 '12 at 00:46
still can't get it to work by using document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'"); – Aaron Jul 02 '12 at 03:37
2

What exactly are you doing in your code that makes you realize it's not working? – David G Jul 02 '12 at 03:41
I have added the code and added a alert at the end (so it will alart when the code is done), and I can also see the icon not changing. (when I remove the code is see my alart display, so i know there is somthing wrong with the code I just added.) – Aaron Jul 02 '12 at 03:46
IE <= 8 does not support setAttribute – RTF Sep 28 '13 at 15:27
For my use case, I found that I don't even need to instantiate the index data attribute in any way. Just declare and assign a value to it. `[documentElement].dataset.index = 0;` Then get it similarly like `[documentElement].dataset.index` which would return 0 – Akin Hwan Jan 04 '18 at 22:49
If you're anal about performance I would stick to `setAttribute()` for now. See [jsPerf](https://jsperf.com/html5-dataset-vs-native-setattribute). – thdoan Mar 22 '18 at 01:03
@thdoan, So setAttribute is better than directly modify dataset? According to MDN document, I thought the dataset can't directly modify, but when to try It can work, so... I don't know what method is the correct way. haha. – LiHao Sep 07 '20 at 16:30

Sergej Brazdeikis · Answer 2 · 2014-12-07T02:22:13.107

68

Please use dataset

var article = document.querySelector('#electriccars'),
    data = article.dataset;

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

so in your case for setting data:

getElementById('item1').dataset.icon = "base2.gif";

edited Dec 07 '14 at 02:22

answered May 07 '14 at 10:34

Sergej Brazdeikis

1,323
10
11

1

Also (when appropriate), use camelCase to refer to hyphenated names (bracketed strings fail). – 2540625 Jun 17 '16 at 00:36
7

https://jsperf.com/html5-dataset-vs-native-setattribute This suggested method is a lot slower – sledgeweight Feb 17 '17 at 10:16

score 26 · Answer 3 · answered Jan 21 '20 at 05:17

For people coming from Google, this question is not about data attributes - OP added a non-standard attribute to their HTML object, and wondered how to set it.

However, you should not add custom attributes to your properties - you should use data attributes - e.g. OP should have used data-icon, data-url, data-target, etc.

In any event, it turns out that the way you set these attributes via JavaScript is the same for both cases. Use:

ele.setAttribute(attributeName, value);

to change the given attribute attributeName to value for the DOM element ele.

For example:

document.getElementById("someElement").setAttribute("data-id", 2);

Note that you can also use .dataset to set the values of data attributes, but as @racemic points out, it is 62% slower (at least in Chrome on macOS at the time of writing). So I would recommend using the setAttribute method instead.

Set custom attribute using JavaScript

3 Answers3

Linked

Related