Failed to looping javascript with HTML table-CodePudding

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

CodePudding user response：

All table content should be inside cells, your div is in tbody - that's why table drop it out.

In your case - remove div and set his id to <tbody>

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

CodePudding user response：

Just do following changes :

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