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    lt div id  tree  gt           lt ul gt               lt li class  folder  gt Outputs                  lt ul gt                       lt li id  item1  data  icon   base gif   url   page1 htm   target   AccessPage   gt Item 1 Title                      lt li id  item2  data  icon   base gif   url   page2 htm   target   AccessPage   gt Item 2 Title                      lt li id  item3  data  icon   base gif   url   page3 htm   target   AccessPage   gt Item 3 Title                      lt li id  item4  data  icon   base gif   url   page4 htm   target   AccessPage   gt Item 4 Title                  lt  ul gt           lt  ul gt       lt  div gt    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

User · Answer

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

User · Answer

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    lt li     data-icon  base gif      gt    And to do it in JS use the dataset property   document getElementById  item1   dataset icon    base gif

User · Answer

Please use dataset  var article   document querySelector   electriccars        data   article dataset      data columns - gt   3     data indexnumber - gt   12314     data parent - gt   cars    so in your case for setting data   getElementById  item1   dataset icon    base2 gif

[javascript] Set custom attribute using JavaScript

Examples related to javascript

Examples related to dom

Examples related to dynatree