Failed to looping javascript with HTML table

I failed to looping data with javascript and show it inside HTML table, the failed is the data that shown is not right as i expected, the data is outside the table, how to make the data show inside the table

HTML code :

  <table style="border: 1px solid">
    <thead>
      <th>Name</th>
    </thead>
    <tbody>
      <div id="demo"></div>
    </tbody>
  </table>

Javascript code :

      const cars = ["BMW", "Volvo", "Saab", "Ford"];

      let i = 0;
      let text = "";

      for (let i = 0; i < cars.length; i++) {
        text += "<tr> <td>"+ cars[i] + "</td> </tr>";
      }
      document.getElementById("demo").innerHTML = text;

The result :
enter image description here

>Solution :

Just do following changes :

 <table style="border: 1px solid">
    <thead>
      <th>Name</th>
    </thead>
    <tbody id="demo"></tbody>
  </table>