Creating a dynamic grid of divs with Javascript

I want to create a grid of HTML divs that will have the same number of rows and columns but with the number of rows/columns being based on a particular number that would be passed to the Javascript function.

e.g. if the number is 3 the grid will be 3 rows and 3 columns

if the number is 4 the grid will be 4 rows and 4 columns..etc

in the case of 3 the outputted code would need to look something like:

<div class="row">
  <div class="gridsquare">1</div>
  <div class="gridsquare">2</div>
  <div class="gridsquare">3</div>
</div>
<div class="row">
  <div class="gridsquare">4</div>
  <div class="gridsquare">5</div>
  <div class="gridsquare">6</div>
</div>
<div class="row">
  <div class="gridsquare">7</div>
  <div class="gridsquare">8</div>
  <div class="gridsquare">9</div>
</div>

What is a good way of iterating through javascript so that the correct elements can be identified to add the row div opening or closing tags (?)

Solution

Something along these lines should work for ya.

<html><head> 
  <script language="javascript"> 
    function genDivs(v){ 
      var e = document.body; // whatever you want to append the rows to: 
      for(var i = 0; i < v; i++){ 
        var row = document.createElement("div"); 
        row.className = "row"; 
        for(var x = 1; x <= v; x++){ 
            var cell = document.createElement("div"); 
            cell.className = "gridsquare"; 
            cell.innerText = (i * v) + x;
            row.appendChild(cell); 
        } 
        e.appendChild(row); 
      } 
      document.getElementById("code").innerText = e.innerHTML;

    }
  </script> 
</head> 
<body> 
    <input type="button" onclick="genDivs(6)" value="click me"> 
    <code id="code"></code>
</body> 
</html>

Results:

  <div class="row">
    <div class="gridsquare">
      1
    </div>

    <div class="gridsquare">
      2
    </div>

    <div class="gridsquare">
      3
    </div>

    <div class="gridsquare">
      4
    </div>

    <div class="gridsquare">
      5
    </div>

    <div class="gridsquare">
      6
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      7
    </div>

    <div class="gridsquare">
      8
    </div>

    <div class="gridsquare">
      9
    </div>

    <div class="gridsquare">
      10
    </div>

    <div class="gridsquare">
      11
    </div>

    <div class="gridsquare">
      12
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      13
    </div>

    <div class="gridsquare">
      14
    </div>

    <div class="gridsquare">
      15
    </div>

    <div class="gridsquare">
      16
    </div>

    <div class="gridsquare">
      17
    </div>

    <div class="gridsquare">
      18
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      19
    </div>

    <div class="gridsquare">
      20
    </div>

    <div class="gridsquare">
      21
    </div>

    <div class="gridsquare">
      22
    </div>

    <div class="gridsquare">
      23
    </div>

    <div class="gridsquare">
      24
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      25
    </div>

    <div class="gridsquare">
      26
    </div>

    <div class="gridsquare">
      27
    </div>

    <div class="gridsquare">
      28
    </div>

    <div class="gridsquare">
      29
    </div>

    <div class="gridsquare">
      30
    </div>
  </div>

  <div class="row">
    <div class="gridsquare">
      31
    </div>

    <div class="gridsquare">
      32
    </div>

    <div class="gridsquare">
      33
    </div>

    <div class="gridsquare">
      34
    </div>

    <div class="gridsquare">
      35
    </div>

    <div class="gridsquare">
      36
    </div>
  </div>