Как поместить массив в div

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

Как упоминалось выше, в комментариях, вы не должны AppendChild в 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