JS在容器内使用for循环创建div答案

【问题标题】：JS creating divs with a for loop inside containerJS在容器内使用for循环创建div
【发布时间】：2017-04-04 04:35:02
【问题描述】：

我正在尝试在容器内创建多个 div，但我不知道如何将创建的 div 嵌套在主容器中。之前在 html 中创建容器是否也可以或更好？

function createDiv(numberOfDivs) {
  var i = 0;
  var newElement = [];
  var mainContainer = document.createElement('div');

  mainContainer.innerHTML = 'MAIN CONTAINER';
  mainContainer.className = 'main';
  document.body.appendChild(mainContainer);

  for (i; i < numberOfDivs; i++) {
    newElement[i] = document.createElement('div');
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    newElement[i].className = 'box';
    newElement[i].id = (i + 1);
    newElement[i].textContent = 'this is div number: ' + (i + 1);
    document.body.appendChild(newElement[i]);
  }
};

createDiv(10);

【问题讨论】：

之前可以用html创建容器，不显示。那么你只需要在js中添加一个类就可以让它们可见
Generate 3000 squares procedurally的可能重复
可能重复：stackoverflow.com/questions/40707643/…

标签： javascript html for-loop createelement

【解决方案1】：

如果可以，您应该在不使用 javascript 的情况下创建它们。否则，您会将新元素附加到document.body。只需将其更改为 mainContainer。

【讨论】：

新元素可以在 DOM 之外创建，然后在最后一次性添加。
这对我关于定位错误元素的评论有何影响？
它没有。但是：如果可以，您应该不使用 javascript 创建它们。 不正确。
如果您知道 100% 的时间您的页面上会有一些内容，即静态内容，那么是的，您应该这样做。这是我们之间的意见分歧。
但内容并不像 OP 所显示的那样是静态的。所需的div 元素的数量将会改变。因此，它不是静态的，因此应该使用 JavaScript 来完成。

【解决方案2】：

您也可以通过 Javascript (.appendChild) 创建它们。如果你愿意，你可以首先在你的 HTML 中创建它们（不使用 Javascript），如果有必要，可以通过 display: none 将它们隐藏，然后添加 display: block 使它们可见。

【讨论】：

【解决方案3】：

是的，您可以按照其他人的建议提前在 html 中创建容器。然后您可以将您的 div 嵌套在该容器中。

<html><body><div id="mainContainer" ></div></body></html>

正如其他人建议的那样，您可以应用必要的 css 使其在必要时隐藏，直到您希望它可见为止。

然后 javascript 将 div 嵌套在 mainContainer 中：

function createDiv(numberOfDivs){
    var $mainContainer = $("#mainContainer");
    for (i; i < numberOfDivs; i++) {
        var newDiv = $("<div class='box' />");

        //...you can add whatever attributes to the div that you want...

        $mainContainer.append(newDiv);
    }
}

【讨论】：

感谢您的帮助，刚刚看到它，但我试图不惜一切代价避免使用 jquery。但附加到主容器有帮助:)

【解决方案4】：

感谢所有帮助，指向另一个主题的链接帮助我只是忘记将孩子附加到 mainContainer。

function createDiv(numberOfDivs) {
  var i = 0;
  var newElement = [];
  var mainContainer = document.getElementById('main');

  for (i; i < numberOfDivs; i++) {
    newElement[i] = document.createElement('div');
    newElement[i].style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    newElement[i].className = 'box';
    newElement[i].id = (i + 1);
//  newElement[i].textContent = 'this is div number: ' + (i + 1);
    mainContainer.appendChild(newElement[i]);
  }
};

createDiv(10);

【讨论】：