Question

所以我经常使用jquery，但如果我们诚实的话，实际上并不了解JS。我正在通过W3schools并正在使用这个特定的“试试我”片段

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

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

所以我创建了这个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]作为每个变量。 我没有成功。实现这个目标的正确方法是什么？

这是 JS FIDDLE

以下是我可怕的js所需的代码段：

nvarchar(10)

Answer 1

您在示例中所做的是将demo元素的innerHTML替换为数组的第一个元素。如果要将所有div渲染到demo元素，可以使用以下解决方案之一：

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

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只是一个数字。如果你将你的id更新为b1，b2，b3（在JS和CSS中）你会得到颜色。

但是你想要实现的目标有点不清楚。

div内容可以包含自己的特定变量吗？

2 个答案: