每次修改innerHTML时，都会修改DOM，浏览器会将其规范化。您没有修改HTML源代码。

list.innerHTML = '<table>';

在这里创建一个表元素。缺少的</table>是由浏览器的错误恢复添加的。

list.innerHTML += `<tr><td>${id}</td></tr>`;

不是将<tr>元素附加到节点的内容。
因此，您尝试创建的内容是：

<table></table>
<tr><td>${id}</td></tr>

这说不通
如果你要使用innerHTML，那么用你想要赋值的完整值构建一个字符串，然后一次性将其赋值给innerHTML**。

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

问题是因为你需要将innerHTML设置为一个完整有效的HTML字符串。不能在一个操作中追加HTML元素的一部分，然后在另一个操作中添加内容，然后再次关闭标记。
要解决这个问题，请将HTML连接到字符串变量中，然后在HTML完成时设置innerHTML一次：

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"
      }
    }
  }
}

var list = document.querySelector('#list');
let html = '<table>';
for (let id in teams) {
  html += `<tr><td>${id}</td></tr>`;
}
html += '</table>';
list.innerHTML = html;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list"></div>

不要使用innerHTML。使用可用的document方法]。
下面是一个代码示例。

const teamsObj = {
  "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"
      }
    }
  }
}

const list = document.querySelector('#list');
const table = document.createElement(`table`);
const aRow = document.createElement(`tr`);
const aCell = document.createElement(`td`);
const rows = Object.entries(teamsObj).forEach( ([id, ]) => {
  // create a new row by cloning [aRow]
  const row = aRow.cloneNode();
  // create a new table cell by cloning [aCell]
  const cell = aCell.cloneNode();
  // fill the cell with the id
  cell.textContent = id;
  // append the cell to the row
  row.append(cell);
  // append the row to the table
  table.append(row);
});

// the table now only exists in memory
// so append it to div#list to add it to
// the document.
list.append(table);

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

您可以使用JSON对象中的数据填充HTML表，方法是迭代对象并使用JavaScript动态创建表行和单元格。下面是一个示例解决方案：

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"
            }
        }
    }
}

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

for (let id in teams) {
  var team = teams[id];

  var row = document.createElement('tr');

  var idCell = document.createElement('td');
  idCell.textContent = id;
  row.appendChild(idCell);

  var displayNameCell = document.createElement('td');
  displayNameCell.textContent = team.displayName;
  row.appendChild(displayNameCell);

  var descriptionCell = document.createElement('td');
  descriptionCell.textContent = team.description;
  row.appendChild(descriptionCell);

  table.appendChild(row);

  if (team.channels) {
    for (let channelId in team.channels) {
      var channel = team.channels[channelId];

      var channelRow = document.createElement('tr');

      var channelIdCell = document.createElement('td');
      channelIdCell.textContent = channelId;
      channelRow.appendChild(channelIdCell);

      var channelDisplayNameCell = document.createElement('td');
      channelDisplayNameCell.textContent = channel.displayName;
      channelRow.appendChild(channelDisplayNameCell);

      var channelDescriptionCell = document.createElement('td');
      channelDescriptionCell.textContent = channel.description;
      channelRow.appendChild(channelDescriptionCell);

      table.appendChild(channelRow);
    }
  }
}

list.appendChild(table);

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

在这段代码中，我们遍历teams对象，并为每个团队和频道动态创建表格行（）和单元格（）。我们为每个单元格设置适当的文本内容并将它们追加到表格中。最后，我们将该表附加到一个HTML元素，并将id属性设置为“list”（根据HTML结构调整此ID）。
通过使用API创建和追加表元素，我们可以确保正确维护表结构，并在适当的单元格中填充数据。
希望这有帮助！如果你还有什么问题就告诉我。