如何將數組放入div

我想將此數組放入div中，以便將其放置在我們的網站上。我怎樣才能做到這一點？或者有另一種方式，而不是把它放在一個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;

來源

2014-10-20 Cees van den Toren

是什麼你試圖達到？ – 2014-10-20 11:57:19

你能分享你的代碼嗎？ – 2014-10-20 11:57:50

您應該將按鈕添加到文檔片段並將其附加到正文，而不是將每個按鈕分別附加到DOM。 – Andy 2014-10-20 11:59:15

從我能理解，你想插入陣列中的一些按鈕，然後希望它們添加到一個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);

在循環內，並且會在div中追加11個按鈕。

請注意我是如何使用功能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中。

來源

2014-10-20 12:03:37

以下是使用文檔片段的版本。這是你想要做的嗎？

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

來源

2014-10-20 12:20:04 Andy

正如評論mentionned以上，你不應該在DOM的appendChild在一個循環中，也沒有在循環使用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

來源

2014-10-20 12:24:31 laruiss

如何將數組放入div

回答

相關問題