Question

我想将此数组放入div中，以便将其放置在我们的网站上。我怎样才能做到这一点？或者是否有其他方式而不是将其放入div中。

var chair = new Array() 
{
  for (var i = 0; i <= 10; i++) {
    var button = document.createElement("button");
    button.id = "button" + i;
    button.innerHTML = (i > 3 && i < 8) ? "Button" : "hi";
    document.body.appendChild(button);
  }
}

document.getElementById("zaal1").innerHTML = chair;

Answer 1

根据我的理解，你试图在数组中插入一些按钮然后想要将它们附加到div以便在文档中显示它们，下面的代码就是这样：

var chair = new Array();

for (var i = 0; i <= 10; i++) {
    var button = document.createElement("button");
    button.id = "button" + i;
    button.innerHTML = (i > 3 && i < 8) ? "Button" : "hi";
    chair[i] = button;
    document.getElementById("zaal1").appendChild(chair[i]);
}

<div id = "zaal1"></div>

但我不认为你需要一个阵列，你可以这样做：

document.getElementById("zaal1").appendChild(button);

在循环内部，它还会将11个按钮附加到div中。

注意我是如何使用函数appendChild的，它将继续追加div中的每个按钮。您正在做什么document.getElementById("zaal1").innerHTML = chair;错误，因为您的数组是空的，即使填充数组，上面的行也会打印出来：

[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement],[object HTMLButtonElement]

因为数组包含11个按钮对象。你需要专门将它们中的每一个附加到div。

Answer 2

这是使用文档片段的版本。这是你想做的吗？

var frag = document.createDocumentFragment();
for (var i = 0; i <= 10; i++) {
  var button = document.createElement("button");
  button.id = "button" + i;
  button.innerHTML = (i > 3 && i < 8) ? "Button" : "hi";
  frag.appendChild(button);
}

document.getElementById("zaal1").appendChild(frag);

DEMO

Answer 3

如上所述，您不应该在循环中将DOM附加到DOM中，也不应在循环中使用innerHTML：

if (document.createDocumentFragment) { // Use documentFragment if available
    var docFrag = document.createDocumentFragment();
    for (var i = 0; i <= 10; i++) {
        var button = document.createElement("button");
        button.id = "button" + i;
        button.innerHTML = (i > 3 && i < 8) ? "Button" : "hi";
        docFrag.appendChild(button);
    }
    document.getElementById("zaal1").appendChild(docFrag);
} else {
    var zaal1, html = '';
    zaal1 = document.getElementById("zaal1");
    var array = [];
    for (var i = 0; i <= 10; i++) {
         array.push( '<button id="button' + i + '">'
            + ((i > 3 && i < 8) ? "Button" : "hi")
            + "</button>");
    }
    zaal1.innerHTML = array.join(''); // Use innerHTML only when all the html is already concatenated
}

JSFiddle

如何将数组放入div中

3 个答案: