使用vanilla JavaScript将JSON object展示为HTML table时内容显示异常的问题

我完全懂你现在的困惑——明明写了循环往表格里加行，结果内容却跑到表格外面去了，连<tr>和<td>标签都没了，这确实让人摸不着头脑。咱们来拆解一下问题出在哪，以及怎么解决。

首先还原你的代码场景：

你的JSON数据 #

const teams = {
  "1": {
    "channels": {
      "1_1": {
        "displayName": "General",
        "description": "Systeembeheer cq ICT Service groep"
      },
      "1_2": {
        "description": "Hier staan de tabbladen van het Ticketsysteem",
        "displayName": "TicketSysteem"
      }
    },
    "displayName": "ASC Systeembeheer",
    "description": "Systeembeheer cq ICT Service groep"
  },
  "2": {
    "channels": {
      "2_1": {
        "description": "Handleidingen",
        "displayName": "Handleidingen"
      },
      "2_2": {
        "description": null,
        "displayName": "Externe toegang"
      }
    }
  }
}

你的JS代码 #

var list = document.querySelector('#list');

list.innerHTML = '<table>';

for (let id in teams){
  list.innerHTML += `<tr><td>${id}</td></tr>`;
}

list.innerHTML += '</table>'

对应的HTML结构 #

<div id="list">
  <p>blaat</p>
</div>

问题根源 #

浏览器在处理innerHTML的时候，会自动修复不完整的HTML结构。当你执行list.innerHTML = '<table>'这一行时，浏览器发现这是一个未闭合的标签，会自动帮你补全成<table></table>——也就是说，这时候你的list里已经是一个完整的空表格了。

后面你再执行list.innerHTML += ...，本质上是把新的内容追加到这个表格的外面，而不是表格内部。而且因为浏览器会解析这些追加的字符串，<tr>和<td>标签因为不在<table>内部，会被浏览器当成无效标签直接丢弃，最后就只剩纯文本的id值了。

解决方案 #

有两种常用的办法可以解决这个问题：

方案1：先拼接完整的HTML字符串，再一次性赋值 #

先把整个表格的HTML代码在字符串里组装好，最后再一次性设置给innerHTML，这样浏览器就不会中途补全标签了：

var list = document.querySelector('#list');
let tableHtml = '<table>';

for (let id in teams){
  tableHtml += `<tr><td>${id}</td></tr>`;
}

tableHtml += '</table>';
list.innerHTML = tableHtml;

方案2：用DOM API创建元素（更推荐，更安全） #

如果你不想拼接字符串，也可以直接创建DOM元素来构建表格，这样完全由你控制元素的嵌套关系：

var list = document.querySelector('#list');
const table = document.createElement('table');

for (let id in teams){
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.textContent = id;
  tr.appendChild(td);
  table.appendChild(tr);
}

// 替换掉原来的内容
list.innerHTML = '';
list.appendChild(table);

这样两种方式都能让你的表格行正确嵌套在表格内部，不会再出现内容跑到外面的情况啦。

备注：内容来源于stack exchange，提问作者Peter