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

Question

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

JS

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);

Answer 1

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

Answer 2

您也可以通过 Javascript (.appendChild) 创建它们。如果你愿意，你可以首先在你的 HTML 中创建它们（没有 Javascript）并在必要时通过 display: none 隐藏它们，然后添加 [=12 让它们可见=].

Answer 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);
    }
}

Answer 4

感谢您的所有帮助，link 对另一个主题的帮助我只是忘了将子项附加到 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);

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

JS creating divs with a for loop inside container

javascript

html

for-loop

createelement