title: Javascript automaticaly adds <tbody> to appended string
body: <p>I have an issue with my HTML and Javascript code. I want to generate a grid that fits in the screen width. </p>
  
  <p>There are two issues with my code when I run it in my browser: </p>
  
  <p>The first issue is that the browser adds <code>&lt;tbody&gt;&lt;/tbody&gt;</code> to every string I append to the table element.</p>
  
  <p>The next issue is that for some reason, the browser doesn't bother to execute the <code>setInterval(AnimateGrid(cellArray), 1000);</code> command I have at the end, it only colors 2 cells of the table and then stops, but it is supposed to infinitely keep coloring the table.</p>
  
  <p>Can someone point out to me what am I doing wrong in my code? I know my code isn't optimised and I'm just a beginner. There's no need to help me optimize it, but I'd just like to know why it doesn't do what I described above.</p>
  
  <p>So far I have the following code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onload="AnimateAll()" id="body"&gt;
    &lt;center&gt;
      &lt;table id="table"&gt;
      &lt;/table&gt;
    &lt;/center&gt;
  
    &lt;script type="text/javascript"&gt;
      function generateTable() {
        var table = document.getElementById("table");
        /* Calculate how many cells fit in the screen width */
        var bodywidth = window.outerWidth;
        //each cell is 22px in width (stylesheet), so we devide the screenwidth in 22.
        var cellamountunrounded = bodywidth / 22;
        //round the number downwards
        var cellamount = Math.floor(cellamountunrounded); //this is the amount of cells in one row
        /* Generate a table that has that amount of cells on-screen with correct Id's */
        /* Table has 3 rows */
        table.innerHTML += "&lt;tr&gt;";
        for (var i = 1; i &lt;= cellamount; i++) {
          table.innerHTML += "&lt;td id=" + i + "&gt;&lt;/td&gt;";
        }
        table.innerHTML += "&lt;/tr&gt;&lt;tr&gt;";
        for (var i = cellamount + 1; i &lt;= cellamount * 2; i++) {
          table.innerHTML += "&lt;td id=" + i + "&gt;&lt;/td&gt;";
        }
        table.innerHTML += "&lt;/tr&gt;&lt;tr&gt;";
        for (var i = 2 * cellamount; i &lt;= cellamount * 3; i++) {
          table.innerHTML += "&lt;td id=" + i + "&gt;&lt;/td&gt;";
        }
        table.innerHTML += "&lt;/tr&gt;";
  
  
        /* Make this function return the amount of cells */
        return cellamount * 3;
      }
  
      function numberToArray(Number) {
  
        /* Example: 5=&gt;['1', '2', '3', '4', '5']*/
        var Array = [];
  
        for (var i = 1; i &lt;= Number; i++) {
          Array.push(i);
        }
        /* Make this function return an Array */
        return Array;
      }
  
  
      function RandomFromArray(Array) {
        var myArray = Array;
        var rand = myArray[Math.floor(Math.random() * myArray.length)];
        return rand;
      }
  
  
      function AnimateGrid(Array) {
        //var cellArray = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33'];
        var cellArray = Array;
        var colorArray = ['Red', 'Green', 'Yellow', 'Blue', 'Pink', 'Orange', 'Black', 'Purple', 'Brown'];
        document.getElementById(RandomFromArray(cellArray)).style.backgroundColor = RandomFromArray(colorArray);
        document.getElementById(RandomFromArray(cellArray)).style.backgroundColor = RandomFromArray(colorArray);
      }
  
      function AnimateAll() {
  
        var cells = generateTable();
        var cellArray = numberToArray(cells);
  
        setInterval(AnimateGrid(cellArray), 1000);
  
      }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>