Я сгенерировал HTML-код (много divs) с помощью JavaScript. Теперь я хочу найти сгенерированные div с GetElementById

Question

GetElementById работает, если я вручную добавил div id = "кое-что" внутри тела и использовал метод window.onload = init в скрипте, чтобы получить его. Прекрасно работает.

Но если бы я использовал цикл for для генерации div, где id равен 1,2,3 и так далее. Я не могу получить это. Есть ли способ добраться до этих сгенерированных div'ов?

Это то, что генерирует HTML-код (просто чтобы понять, что я имею в виду):

for(i=0; i<randomizeColoursList.length; i++)
{
    document.getElementById("renderColors").innerHTML += 
        '<div class=\"box\"><div class=\"' + i + '\"><font color=\"' 
        + randomizeColoursList[i] + '\">' 
        + "" + '<img src=\"dist/card_bg.gif\"></div></div>';                    
}   

Генерирует один из них:

<div class="8"><font color="#3be6c4"><img src="dist/card_bg.gif"></font></div>

Div с классом 8 - это идентификатор, который я хочу получить, например. Но это говорит, что это ноль.

Спасибо.

Answer 1

id равно null , поскольку вы не указали его при создании разметки. Похоже, вы присваиваете id значение class.

Answer 2

Создайте что-то похожее на это:

<div id="div1" class="8"><font color="#3be6c4"><img src="dist/card_bg.gif"></font></div> 

Кроме того, вам не нужно использовать теги шрифтов и не следует их использовать. Просто добавьте стиль в div.

<div id="div1" class="8" style="color:#3be6c4;"><img src="dist/card_bg.gif"></div> 

Answer 3

То, как вы это делаете, немного задом наперед.Если вы напишите свой код, как у меня ниже, вам не нужно указывать идентификаторы divs, вы все равно получите массив, полный ссылок на них.

var i, div, img;
var createdDivs = [];
for(i=0; i<randomizeColoursList.length; i++)
{
    div = document.createElement('div');
    img = document.createElement('img');
    div.className = "box";
    div.style.backgroundColor = randomizeColoursList[i];
    div.style.color = randomizeColoursList[i];
    img.src = "dist/card_bg.gif"

    div.appendChild(img);
    document.getElementById("renderColours").appendChild(div);                

    createdDivs.push(div);
}  

Прямая ссылка: http://jsfiddle.net/7HjLL/