Storing DOM reference elements in a Javascript array

Question

Dear experts, I was trying to dynamically generate DOM elements using JS.

I read from Douglas Crockford's book that DOM is very very poorly structured.

Anyways, I would like to create a number of DIVISION elements and store the reference into an array so it could be accessed later.

Here's the code

for(i=0; i<3; i++) {
    var div = document.body.appendChild(document.createElement("div"));
    var arr = new Array();
    arr.push(div);
}

Somehow this would not work..... There is only 1 div element created. When I use the arr.length to test the code there is only 1 element in the array.

Is there another way to accomplish this?

Thanks in advance

Answer 1

You are recreating the array with each iteration (and thus blanking it).

I think you want something like this.

var arr = []; // more succinct version of new Array();

for (var i = 0; i < 3; i++) {
    var div = document.body.appendChild(document.createElement('div'));
    arr.push(div);        
};

Answer 2

You're making a separate array each time the loop runs.
Therefore, each array instance

You need to move the arr variable outside the loop.