title: JS creating divs with a for loop inside container
body: <p>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? </p>
  
  <p>JS</p>
  
  <pre><code>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 &lt; 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);
  </code></pre>