title: Adding row to a table with Javascript
body: <p>I am just doing a Javascript excercise which should add a row into a table. Html reads like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;  
  &lt;html&gt;&lt;head&gt;&lt;br&gt;&lt;meta charset=utf-8 /&gt;   
  &lt;/head&gt;&lt;body&gt;  
  &lt;table id="sampleTable" border="1"&gt;  
  &lt;tr&gt;&lt;td&gt;Row1 cell1&lt;/td&gt;  
  &lt;td&gt;Row1 cell2&lt;/td&gt;&lt;/tr&gt;  
  &lt;tr&gt;&lt;td&gt;Row2 cell1&lt;/td&gt;  
  &lt;td&gt;Row2 cell2&lt;/td&gt;&lt;/tr&gt;  
  &lt;/table&gt;&lt;br&gt;  
  &lt;input type="button" onclick="insert_Row()" value="Insert row"&gt;   
  &lt;/body&gt;&lt;/html&gt;  
  </code></pre>
  
  <p>And my script that doesn't work:</p>
  
  <pre><code> function insert_Row(){
        var xTable=document.getElementById('sampleTable');
         for (i=0;i&lt;=xTable.children.length;i++)
         {
          if(i===xTable.children.length)
          {
            xTable.createElement('tr');
            tr.innerHTML ='&lt;td&gt;cell1&lt;/td&gt;&lt;td&gt;cell2&lt;/td&gt;'
  
          }
  
        }
  
      }
  </code></pre>
  
  <p>This is the correct solution:</p>
  
  <pre><code>function insert_Row()
  {
  var x=document.getElementById('sampleTable').insertRow(0);
  var y = x.insertCell(0);
  var z = x.insertCell(1);
  y.innerHTML="New Cell1";
  z.innerHTML="New Cell2";
  }
  </code></pre>
  
  <p>I would like to understand what is wrong with my first solution? Why doesn't it create the  tag but throws error instead?</p>