Question

assume we have a set of html tags like

<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>

I am trying to add an extra attribute in to the div tag like key='post' from the hash {"post" : ["0","1"], "get": ["0","2"], "search": ["2","1"]} for each tags respectively.
so that it looks like,

<div id="slide1" class="slide" key="post"></div>
<div id="slide2" class="slide" key="get"></div>
<div id="slide3" class="slide" key="search"></div>

Is it possible to do that using javascript??

The code that I came up with looks like

for(key in hashArray){
var el = document.getElementsByID('slide' + (slideNumber));
el.setAttribute('key', key);
slideNumber++;
}

but im getting an error document.getElementByID is not a function

Answer 1

Use custom data attributes [e.g. data-key], then you are perfectly right.

EDIT: your code will look like:

var slideNumber = 1;

for(key in hashArray){
    var el = document.getElementById('slide' + (slideNumber));
    el.setAttribute('data-key', key);
    slideNumber++;
}

Working fiddle here.