JavaScript - 在循环中创建 div 的数量答案

【问题标题】：JavaScript - create number of divs in loopJavaScript - 在循环中创建 div 的数量
【发布时间】：2014-08-25 15:27:58
【问题描述】：

我是 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]);
}

但我看到一个空白屏幕。

【问题讨论】：

您的 created-<div> 元素都没有任何内容。您希望看到什么？
按 F12 并告诉我们错误。
我希望看到一个绿色背景的 div :) 但我想我现在错了。我是 ios 开发人员，javaScript 对我来说是新的。我应该在代码中添加什么？内容？
没有错误。只有空白屏幕...
没有错误。完全没有。问题是div 元素没有内容，因此没有高度，没有高度意味着没有可见性。给内容，或者直接给高度。

标签： javascript html visual-studio-2012

【解决方案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.

【讨论】：

谢谢！我正在使用您的第一个选项:)
不客气，我很高兴能帮上忙！ :)

【解决方案2】：

给你的 div 指定宽度和高度。

div.style.width = '10px';
div.style.heigt = '10px';

或者给它内容。

【讨论】：