JavaScript循环渲染数据到HTML表格时数据显示在表外如何解决

你的表格结构不符合HTML语法规范，这是数据显示在表格外的核心原因：

• <tbody>标签的直接子元素只能是<tr>（表格行）元素，你在<tbody>内部放置<div id="demo"></div>属于非法嵌套，浏览器解析HTML时会自动把这个不符合位置规则的div移到<table>节点外部，后续你往这个div里插入的行内容自然就跟着跑到表格外面了。
• 原代码还有两处不规范问题：一是<thead>里的<th>（表头单元格）没有用<tr>标签包裹，二是JS中循环外提前声明了变量i，循环内又重复声明同名变量，属于冗余代码，虽然不直接触发本次渲染异常，但建议一并修正。

移除<tbody>内部非法嵌套的div，把渲染容器的id直接绑定到<tbody>标签上，同时修正其他不规范的结构和代码即可。

修正后的HTML代码 #

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

修正后的JavaScript代码 #

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

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

内容的提问来源于stack exchange，提问作者Meikel Rizky Hartawan