title: Add table header for dynamic table in javascript
body: <p>I'm trying to create a table in javascript and put a header on it. I tried to incorporate the answer from this <a href="https://stackoverflow.com/questions/11062735/how-to-add-header-for-dynamic-table">SO question</a> but perhaps I didn't include it in the right place. The body of the table works perfectly, but the header appends as a bunch of text to the top instead of a nicely formatted header. Here is the code:</p>
  
  <pre><code>function generate_table() {
      // get the reference for the body
      var body = document.getElementsByTagName("body")[0];
  
      // creates a &lt;table&gt; element and a &lt;tbody&gt; element
      var tbl = document.createElement("table");
      //var header = document.createElement("header");
      var header = '&lt;tr&gt;&lt;th&gt;Country&lt;/th&gt;&lt;th&gt;City&lt;/th&gt;&lt;/tr&gt;';
  
      //var header = "&lt;th&gt;Header&lt;/th&gt;";
      var tblBody = document.createElement("tbody");
  
  
      // creating all cells
      for (var i = 0; i &lt; results.weak_sent.length; i++) {
          // creates a table row
          var row = document.createElement("tr");
  
          for (var j = 0; j &lt; 2; j++) {
              // Create a &lt;td&gt; element and a text node, make the text
              // node the contents of the &lt;td&gt;, and put the &lt;td&gt; at
              // the end of the table row
              var cell = document.createElement("td");
              if (j == 0) {
                  var cellText = document.createTextNode(results.weak_sent_num[i]);
              } else {
                  var cellText = document.createTextNode(results.weak_sent[i]);
              }
  
  
              cell.appendChild(cellText);
              row.appendChild(cell);
          }
  
          // add the row to the end of the table body
          tblBody.appendChild(row);
      }
      tbl.append(header)
      // put the &lt;tbody&gt; in the &lt;table&gt;
      tbl.appendChild(tblBody);
  
  
  
      // appends &lt;table&gt; into &lt;body&gt;
      body.appendChild(tbl);
      // sets the border attribute of tbl to 2;
      tbl.setAttribute("border", "2");
  }
  </code></pre>
  
  <p>It prints the rows and the columns correctly, but instead of interpreting the <code>&lt;tr&gt;&lt;th&gt;</code> as HTML tags it just prints them out as text. I've also noticed that if the table text contains any HTML tags, like <code>&lt;strong&gt;</code> or <code>&lt;b&gt;</code>, they are returned as plain text as well. How can I make them be read as HTML. I have a CSS page as well but there's no reset or anything (intentionally) affecting the use of bold or tables. Here's my result</p>
  
  <pre><code>&lt;tr&gt;&lt;th&gt;Country&lt;/th&gt;&lt;th&gt;City&lt;/th&gt;&lt;/tr&gt;
  1   Row 1 text
  2   Row &lt;b&gt;2&lt;/b&gt; text
  </code></pre>