title: javascript add table header to html table
body: <p>I am trying to add a header to a html table with a javascript function. The entire script is rather large so I've just included the html snippet where the html table is created and then the function that is supposed to add a header to that table. (when a button is clicked this function will be called).
  However I get the following error:</p>
  
  <pre class="lang-none prettyprint-override"><code>Locations.html:703 Uncaught TypeError: Cannot read property 'createTHead' of null
  </code></pre>
  
  <p>Line 703 corresponds with the "var hdr = tbs.createTHead();" line of code. It seems as though the function cannot find the "myTable" table and is returning a null when it runs the getelement by id line (i think)..but I am not sure why? Why would it not be able find this table element?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="statsContainer"&gt;
      &lt;div class="mainCont" id="mainCont"&gt;&lt;/div&gt;
      &lt;div class="statsLoc" id="statsLoc"&gt;
          &lt;table class="myTable" id="myTable"&gt;&lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="listLoc" id="listLoc"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  function locClick(strLN) {  
      RegionName.innerText = strLN;       
      var qry = "select Latitude, Longitude, Description from locations where Location_ID in (select Location_ID from locations where Location_Name = '" + strLN + "')";      
      clearDiv("mainCont");
      clearDiv("statsLoc");
      clearDiv("listLoc");        
      phpRequest(qry, "getDataFromPhp", processPHP, 1);       
      addTableHead("myTable", "help");        
  }               
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function addTableHead(tbName, txtHead) {
      var tbs = document.getElementById("myTable");
      var hdr = tbs.createTHead();
      var rw = hdr.insertRow(0);
      var cell = rw.insertCell(0);
      cell.innerHTML = txtHead;}
  </code></pre>