JS creating divs with a for loop inside container

Question

I am trying to create a number of divs inside a container, but i cant figure out how to nest the created ones within the main container. Is it also possible or better to create the container before in the 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);

You can create the container in html before and dont display them. Then you only need to add a class in js to make them visible — theoretisch, Nov 20 '16 at 20:32
Possible duplicate of [Generate 3000 squares procedurally](http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally) — Scott Marcus, Nov 20 '16 at 20:35
Possible duplicate of: http://stackoverflow.com/questions/40707643/generate-3000-squares-procedurally/40707772#40707772 — Scott Marcus, Nov 20 '16 at 20:35

score 2 · Accepted Answer · answered Nov 20 '16 at 20:48

Yes, you can create the container in the html ahead of time, as others have suggested. Then you can nest your divs inside that container.

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

As others suggested you can apply the necessary css to make it hidden if necessary until you want it visible.

Then javascript to nest divs inside 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);
    }
}

thanks for your help, just saw it but i tried to avoid jquery at all cost. but the append to main container helped :) — HendrikEng, Nov 20 '16 at 20:54

HendrikEng · Answer 2 · 2016-11-20T20:58:46.513

Thanks for all the help, the link to another topic helped i simply forgot to append the childs to the 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);

score 0 · Answer 3 · answered Nov 20 '16 at 20:35

0

If you can, you should create them without using javascript. Otherwise, you are appending the new elements to document.body. Just change that to be mainContainer.

answered Nov 20 '16 at 20:35

Taplar

24,788
4
22
35

The new elements can be made outside of the DOM and then added all at once at the end. – Scott Marcus Nov 20 '16 at 20:36
How does that reflect on my comment about targeting the wrong element to append to? – Taplar Nov 20 '16 at 20:36
It doesn't. But: *If you can, you should create them without using javascript.* is not correct. – Scott Marcus Nov 20 '16 at 20:39
If you know 100% of the time you are going to have some content on your page, static content, then yes you should. Which is an opinion difference between us. – Taplar Nov 20 '16 at 20:39
But the content isn't static as the OP has shown. The number of desired `div` elements will change. So, it's not static and, as such, should be done with JavaScript. – Scott Marcus Nov 20 '16 at 20:54

score 0 · Answer 4 · answered Nov 20 '16 at 20:36

You can create them via Javascript (.appendChild) as well. If you want, you can create them in your HTML at first (without Javascript) and make them hidden if it's necessary via display: none for example, and then make them visible adding display: block.

JS creating divs with a for loop inside container

4 Answers4