title: Uncaught TypeError: Cannot read property 'insertRow' of undefined
body: <p><em>EDIT</em> TO INCLUDE ALL CODE
  If I take off the tbody reference I'm back to this error
  &quot;Uncaught TypeError: regTable.insertRow is not a function at addRegistration&quot;</p>
  <p>I'm having trouble with this javascript method to add form data to a table.
  After filling out the form information when users click on the button it should add it to the table.  I've tried a couple of solutions other people have posted here and so far none have worked. It was getting a different error message &quot;uncaught type error: table.insertrow is not a function&quot; but it always stops on that line. I'm worried I'm going to have the same problem when I add the delete button, which I haven't gotten to because I've been stuck here.
  I'm wondering if I'm missing something really easy like a typo? This is my first class in web programming so it may be.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;title&gt; Player Registration  &lt;/title&gt;
  
          &lt;h1&gt;Enter Player Information&lt;/h1&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;flexbox&quot;&gt;
          &lt;form id=&quot;registration&quot; action=&quot;#&quot;&gt;
             &lt;p&gt; &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
              &lt;input id=&quot;name&quot; type=&quot;text&quot; autofocus required&gt;&lt;/p&gt;
  
             &lt;p&gt;&lt;label for=&quot;slevel&quot;&gt;Skill level:&lt;/label&gt;&lt;/p&gt;
             &lt;input id=&quot;sLevel&quot; type=&quot;text&quot; &gt;&lt;/p&gt;
  
             &lt;p&gt; &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt;
              &lt;input id=&quot;email&quot; type=&quot;email&quot; &gt;&lt;/p&gt; required&gt;&lt;/p&gt;
  
             &lt;p&gt; &lt;label for=&quot;city&quot;&gt;City:&lt;/label&gt;
              &lt;input id=&quot;city&quot; type=&quot;text&quot; &gt;&lt;/p&gt;
  
             &lt;p&gt; &lt;input type = &quot;button&quot; value = &quot;Register&quot; id=&quot;saveButton&quot;&gt; &lt;/p&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;hr&gt;
          &lt;div&gt;
              &lt;table id=&quot;registration&quot; &gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Level&lt;/th&gt;
                          &lt;th&gt;Email&lt;/th&gt;
                          &lt;th&gt;City&lt;/th&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Name&lt;/td&gt;
                          &lt;td&gt;Level&lt;/td&gt;
                          &lt;td&gt;Email&lt;/td&gt;
                          &lt;td&gt;City&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt; 
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script&gt;
          document.getElementById(&quot;saveButton&quot;).onclick = function() {addRegistration()};
          function addRegistration() {
                  var regTable = document.getElementById(&quot;registration&quot;).getElementsByTagName('tbody')[0];
                  var newRow = regTable.insertRow(-1);
                  var cell1 = insertCell(0);
                  var cell2 = insertCell(1);
                  var cell3 = insertCell(2);
                  var cell4 = insertCell(3);
                  cell1.innerHTML = &quot;name&quot;;
                  cell2.innerHTML = &quot;slevel&quot;;
                  cell3.innerHTML = &quot;email&quot;;
                  cell4.innerHTML = &quot;city&quot;;
          }
          &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>