Может ли div с контентом использовать свою собственную переменную?

Question

Так что я часто использую jquery, но на самом деле не знаю много о JS, если мы честны. Я иду через w3schools и работал с этим конкретным «испытай меня» сниппета

http://www.w3schools.com/js/tryit.asp?filename=tryjs_datatypes_array

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

Так что я создал это JS fiddle. Попытка поставить конкретную <div> в качестве каждой переменной. Я не увенчался успехом. Каким будет правильный способ достижения этого?

Вот мой JS FIDDLE

Вот необходимый фрагмент кода из моих Ужасные ЯШ:

var boxes = [ 

"<div class='box' id='1'> hello1 </div>" 

,"<div class='box' id='2'> hello2 </div>" 

,"<div class='box' id='3'> hello3 </div>" 

]; 

document.getElementById("demo").innerHTML = boxes[0] 

Answer 1

Что вы делали в вашем примере заменить innerHTML вашего демонстрационного элемента с первый элемент вашего массива. Если вы хотите, чтобы сделать все дивы в демо-элемент, можно использовать один из следующих решений:

Для современных браузеров, вы можете использовать

var boxes = [ 
    "<div class='box' id='1'> hello1 </div>" 
    ,"<div class='box' id='2'> hello2 </div>" 
    ,"<div class='box' id='3'> hello3 </div>" 
]; 

boxes.forEach(function(element) { 
    document.getElementById("demo").innerHTML += element; 
}); 

Проверьте fiddle.

Если вам нужна поддержка старых браузеров (IE8), используйте

var boxes = [ 
    "<div class='box' id='1'> hello1 </div>" 
    ,"<div class='box' id='2'> hello2 </div>" 
    ,"<div class='box' id='3'> hello3 </div>" 
]; 

for (var i = 0; i < boxes.length; i++) { 
    document.getElementById("demo").innerHTML += boxes[i]; 
} 

Проверьте fiddle

Если вы заботитесь о производительности, вы должны пойти по легкому пути

var boxes = [ 
    "<div class='box' id='1'> hello1 </div>" 
    ,"<div class='box' id='2'> hello2 </div>" 
    ,"<div class='box' id='3'> hello3 </div>" 
]; 

document.getElementById("demo").innerHTML = boxes.join(); 

Проверьте fiddle.

Answer 2

Я не уверен, что это было неудачно. Единственная проблема, которую я вижу, это то, что вы не получаете цвет от CSS. Это связано с тем, что id является только цифрой. Если вы обновите свой идентификатор до b1, b2, b3 (в JS и CSS), вы получите цвет.

Но немного непонятно, чего вы хотите достичь.