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

是的，您可以提前在html中创建容器，正如其他人所建议的那样。然后你可以将你的div嵌套在那个容器里。

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

正如其他人建议你可以应用必要的css，以便在必要时隐藏它，直到你希望它可见。

然后javascript在mainContainer中嵌套div：

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 2

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

Answer 3

您也可以通过Javascript（.appendChild）创建它们。如果需要，您可以先在HTML中创建它们（不使用Javascript），然后在必要时通过display: none隐藏它们，然后添加display: block使其可见。

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

JS在容器内创建带有for循环的div

4 个答案: