javascript - Store DOM elements in array : strange behaviour? -

need on here.

i create , than, store dom elements in array.

later, when want use them, unusable, except last one.

here realy simple code illustrate : http://jsfiddle.net/rd2nzk4l/

    var list = new array();      // first loop create , store elements     (i = 1; <= 5; i++) {          var html = '<div id="test-' + + '" style="float: left; border: 2px solid black; width: 50px; height: 50px; margin: 5px;">' + + '</div>';          document.getelementbyid('test').innerhtml += html;          var element = document.getelementbyid('test-' + i);          //console.log(element);          list.push(element);  }  // second loop use stored elements (index in list) {      //console.log(list[ index ]);      list[ index ].style.backgroundcolor = 'yellow';  } 

you can see last element became yellow.

i'll appreciate if have idea.

thanks!

setting innerhtml of container recreate entire dom tree.

therefore, of old elements previous iteration no longer attached dom.

you should set innerhtml once.