title: Bootstrap table with javascript using innerHTML
body: <p>I am trying to get a table to display properly using the following code. The problem is that the <code>&lt;/tbody&gt;</code> and <code>&lt;/table&gt;</code> tags are being applied before the for loop enters the data into the table. The table head displays fine and the data displays fine as well, just not in the table.  What am I doing wrong? I tried moving the last line into the loop with in if statement but the same happens. </p>
  
  <pre><code>    $.getJSON("adriver.php?type=get", function(data, status){
      document.getElementById("aRightContent").innerHTML =
              "&lt;table class='table table-hover'&gt;" +
              "&lt;thead&gt;" +
              "&lt;tr&gt;" +
                  "&lt;th&gt;&lt;i class='fa fa-check-square'&gt;&lt;/iclass&gt;&lt;/th&gt;" +
                  "&lt;th&gt;ID&lt;/th&gt;" +
                  "&lt;th&gt;Firstname&lt;/th&gt;" +
                  "&lt;th&gt;Lastname&lt;/th&gt;" +
                  "&lt;th&gt;UserName&lt;/th&gt;" +
              "&lt;/tr&gt;" +
              "&lt;/thead&gt;" +
              "&lt;tbody&gt;";
  
      for(var i = 0; i &lt; data.length; i++){
          document.getElementById("aRightContent").innerHTML +=
                  "&lt;tr&gt;" +
                      "&lt;td&gt;&lt;input type='radio' name='selectedDriver' value='" + data[i].dID + "'&gt;&lt;/td&gt;" +
                      "&lt;td&gt;" + data[i].dID + "&lt;/td&gt;" +
                      "&lt;td&gt;" + data[i].dFirstName + "&lt;/td&gt;" +
                      "&lt;td&gt;" + data[i].dLastName + "&lt;/td&gt;" +
                      "&lt;td&gt;" + data[i].dUsername + "&lt;/td&gt;" +
                  "&lt;/tr&gt;";
      }
      document.getElementById("aRightContent").innerHTML += "&lt;/tbody&gt;&lt;/table&gt;";
  });
  </code></pre>
  
  <p>Thank you for any help.</p>