使用字符串拼接的方式动态构造 HTML 表格

// 构造表格的 HTML 字符串
let tableHtml = `
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
`;

// 构造表格的数据
const data = [
  { name: '张三', age: 20, gender: '男' },
  { name: '李四', age: 25, gender: '女' },
  { name: '王五', age: 30, gender: '男' },
];

// 构造表格的 tbody 的 HTML 字符串
let tbodyHtml = '<tbody>';

data.forEach(item => {
  tbodyHtml += `
    <tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender}</td>
    </tr>
  `;
});

tbodyHtml += '</tbody>';

// 将 tbody 的 HTML 字符串添加到表格的 HTML 字符串中
tableHtml += tbodyHtml;

tableHtml += '</table>';

// 将表格的 HTML 字符串添加到页面中
document.body.insertAdjacentHTML('beforeend', tableHtml);

在上面的代码中，我们首先使用字符串拼接的方式构造了一个包含表格头部的 HTML 字符串，并将它保存在 tableHtml 变量中。然后，我们构造了一个包含表格数据的数组，并使用 forEach() 方法遍历数组，构造了一个包含 tbody 元素的 HTML 字符串，并将它保存在 tbodyHtml 变量中。最后，我们将 tbodyHtml 添加到 tableHtml 中，并将 tableHtml 添加到页面中。

需要注意的是，使用字符串拼接的方式动态构造 HTML 表格时，需要注意转义特殊字符，以避免 XSS 攻击。可以使用一些工具库，如 Lodash 或 jQuery，来帮助我们更方便地构造 HTML 字符串，并自动转义特殊字符。