title: Creating a dynamic grid with Javascript
body: <p>I'm very new to JS so pardon anything that may be totally, utterly wrong.</p>
  
  <p>I'm trying to create a 16x16 grid of divs dynamically. My logic is that I'd create a container for all of the grid, inside the container I'd append 16 rows and in each row I'd append 16 boxes. I have a rough idea of my code and I wanted to check if it is valid logic and JS.</p>
  
  <pre><code>/* Creating the grid */
  function grid() {
      var container = document.createElement("div");
      container.id = "main";
      container.className = "container";
  
      for (i=0, i&lt;16, i+=1) {
          var row = document.getElementbyId('main').appendChild('div');
          row.className = "row";
          row.id = "row" + i;
      };
  
      for (j=0, j&lt;16, j+=1) {
          for (k=0, k&lt;16, k+=1) {
              var box = document.getElementbyId("row" + j).appendChild('div');
              box.className = "box";
          };
      };
  };
  </code></pre>