title: Adding Tables Rows and Cells Dynamically Using Javascript
body: <p>I was trying to add a table row with data in my HTML table using Javascript but it seems I it can't add. Why is that? </p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;
    &lt;/title&gt;
     &lt;script&gt;
      function addUser(){
          var tbl = document.getElementById('datatable');
          var lastRow  = tbl.rows.length;
  
          var iteration = lastRow+1;
          var row = tbl.insertRow(lastRow);
  
          var cellLeft = row.insertCell(0);
          var textNode = document.createTextNode(iteration);
          cellLeft.appendChild(textNode);     
      }
     &lt;/script&gt;
   &lt;/head&gt;
    &lt;body&gt;
      &lt;table border = 1 id = "datatable"&gt;
          &lt;tr&gt;
           &lt;td&gt;ID&lt;/td&gt;
           &lt;td&gt;NAME&lt;/td&gt;
           &lt;td&gt;ADDRESS&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
           &lt;td&gt;1&lt;/td&gt;
           &lt;td&gt;Something&lt;/td&gt;
           &lt;td&gt;Something&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
           &lt;td&gt;2&lt;/td&gt;
           &lt;td&gt;Foo&lt;/td&gt;
           &lt;td&gt;bar&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;form id = "myForm" onsubmit = "addUser()"&gt;
      ID:&lt;input type = "text" name = "txtID"&gt;&lt;br /&gt;
      NAME:&lt;input type = "text" name = "txtName"&gt;&lt;br /&gt;
      ADDRESS:&lt;input type = "text" name = "txtAddress"&gt;&lt;br /&gt;
      &lt;input type = "submit" value = "Add Item"&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>