title: how to use java script to create new div's inside an existing div?
body: <p>The page i am making is designed to:</p>
  
  <ol>
  <li>take the dimensions of a set of tiles and a wall then print out how many tiles are needed to fill the area of the wall</li>
  <li>print on screen a visual representation of what the wall will look like with the tiles on. </li>
  </ol>
  
  <p>so far i've managed to successfully complete the first part. </p>
  
  <pre><code>&lt;style&gt;
  #wallspace {
      width:300px;
      height:auto;
      overflow:hidden;
      position:relative;
      margin:auto;
  }
  &lt;/style&gt;
  
  &lt;form &gt;
  
     Tile Dimensions&lt;br /&gt;
  
     Width: &lt;input type="text" id="tile_width" /&gt;cm
  
     height: &lt;input type="text" id="tile_height" /&gt;cm 
  
     &lt;br /&gt;
     Wall Dimensions&lt;br /&gt;
     Width: &lt;input type="text" id="wall_width" /&gt;cm
  
      height:&lt;input type="text" id="wall_height" /&gt;cm
  
  
     &lt;/form&gt; 
     &lt;button onclick="createWall()" &gt;Try it&lt;/button&gt;
     &lt;p id="result"&gt;  &lt;/p&gt; 
     &lt;div id="wallspace"&gt;
     &lt;/div&gt;
  
  
  &lt;script language="javascript" type="text/javascript"&gt;
  
  function createWall() {
  //collect dimensions from user input
  var tileWidth = document.getElementById("tile_width").value;
  var tileHeight = document.getElementById("tile_height").value;
  var wallWidth = document.getElementById("wall_width").value;
  var wallHeight = document.getElementById("wall_height").value;
  //find the areas of the tile and the wall
  var tileArea = tileWidth * tileHeight;
  var wallArea = wallWidth * wallHeight;
  //divide these to find the number of tiles needed 
  var noOfTiles = (wallArea/tileArea);
  document.getElementById("result").innerHTML="number of tiles needed are " +            
  noOfTiles;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now when it comes to printing the wall, I was trying to use a nested for loop to print the tiles. As below:</p>
  
  <pre><code>function printTiles()
  {  
  var tileWidth = document.getElementById("tile_width").value;
  var tileHeight = document.getElementById("tile_height").value;
  var wallWidth = document.getElementById("wall_width").value;
  var wallHeight = document.getElementById("wall_height").value;
  //rows
  for (var i = 0; i &lt; wallHeight; i = i + tileHeight)
  { 
    //collumns
    for (var a = 0; a &lt; wallWidth; a = a + tileWidth)
    {
      var div = document.createElement("div");
      div.style.width = tileWidth + "px";
      div.style.height = tileHeight + "px";
      div.style.cssFloat = "left";
      div.style.borderWidth = "2px";
      div.style.borderStyle = "solid";
  
      div.innerHTML = i;
      document.getElementById("wallspace").appendChild(div); 
     }
  }
  </code></pre>
  
  <p>so the nested for loop would print each column on the row than go to the next row so on.
  For some reason my printTiles is not working at all and i dont understand why? secondly, when i get it working can i simply use</p>
  
  <pre><code>document.getElementById("wallspace").innerHTML=printTiles();
  </code></pre>
  
  <p>Leave a comment if you don't understand what i'm trying to do and i'll try to explain it better.</p>