调用API渲染表格时<tr><td>等HTML标签直接显示在客户端如何解决

问题根因 #

• 核心错误是JS代码里的重复插入逻辑：你对生成的行字符串同时执行了table.innerHTML += row和table.append(row)两个操作。innerHTML会把字符串解析为HTML结构渲染，但append()方法传入普通字符串时，会将内容作为纯文本节点插入，不会解析HTML标签，这就是页面直接显示<tr><td>代码的直接原因。
• 次要问题：HTML中的<table>标签未闭合，<tbody id="myTable">之后缺少</table>结束标签，可能导致部分浏览器渲染异常。
• 可优化点：循环内重复调用document.getElementById('myTable')会产生不必要的DOM查询开销，可提前获取DOM引用，也可以拼接完所有行后一次性插入，提升性能。

修复代码 #

JS代码修正 #

const fetchUserz = async() => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
  const data = await response.json();
  // 提前获取表格容器，避免循环内重复查询
  const tableBody = document.getElementById(`myTable`);
  let allRows = '';
  for (let i = 0; i < data.length; i++) {
    allRows += `<tr>
      <td>${data[i].name}</td>
      <td>${data[i].email}</td>
    </tr>`;
  }
  // 一次性插入所有行
  tableBody.innerHTML = allRows;
}
fetchUserz();

HTML代码修正 #

在</tbody>和</main>之间补充<table>的闭合标签，表格部分完整代码如下：

<table>
  <thead>
    <tr>
      <th> Names of People </th>
      <th> Emails of People </th>
    </tr>
  </thead>
  <tbody id="myTable">
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Gregg_Hendrix