javascript - 带有内容的 div 可以有自己的特定变量吗？

Question

所以我经常使用 jquery，但老实说，我实际上对 JS 不太了解。我正在浏览 W3schools，并正在使用这个特定的“尝试我”片段

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

所以我想 - 也许我可以用它来让它变得更复杂，并以我个人编码布局或 UI 时的方式使用它。

所以我创建了这个 JS fiddle.尝试输入特定的 <div>作为每个变量。 我没有成功。实现这一目标的正确方法是什么？

这是我的JS FIDDLE

这是我的 Horrible js 所需的代码片段:

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 替换为数组的第一个元素。如果您想将所有 div 渲染到演示元素，可以使用以下解决方案之一:

对于现代浏览器，您可以使用

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 .