JavaScript - 在循环中创建div数量

Question

我是 javaScript 的初学者。我想仅使用 javaScript 创建多个带有循环操作的窗口(div)。这是我的代码:

var numOfWindows = 3;

var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
   arrayDiv[i] = document.createElement('div');
   arrayDiv[i].id = 'block' + i;
   arrayDiv[i].style.backgroundColor = 'green';
   arrayDiv[i].className = 'block' + i;
   document.body.appendChild(arrayDiv[i]);
}    

但我看到一个空白屏幕。

Answer 1

如果您在 CSS 中为创建的元素提供一些内容或特定尺寸，您的 JavaScript 就会完美运行:

var numOfWindows = 3;

var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++)
{
    arrayDiv[i] = document.createElement('div');
    arrayDiv[i].id = 'block' + i;
    arrayDiv[i].style.backgroundColor = 'green';
    arrayDiv[i].className = 'block' + i;
    // setting the textContent to the 'i' variable:
    arrayDiv[i].textContent = i;
    document.body.appendChild(arrayDiv[i]);
}

JS Fiddle demo .

或者:

var numOfWindows = 3;

var arrayDiv = new Array();
for (var i = 0; i < numOfWindows; i++) {
    arrayDiv[i] = document.createElement('div');
    arrayDiv[i].id = 'block' + i;
    arrayDiv[i].style.backgroundColor = 'green';
    arrayDiv[i].className = 'block' + i;

    // setting the class-name of the created elements:    
    arrayDiv[i].className = 'bordered';

    document.body.appendChild(arrayDiv[i]);
}

JS Fiddle demo .