如何用JavaScript将API返回数据加载到表格的不同行（仅单个<td>）

这个问题的核心是你错误地把表格行（<tr>）嵌套到了表格单元格（<td>）里面，这完全不符合HTML表格的结构规范，浏览器为了修复无效结构，就把所有数据都挤到了原来的那个单元格里，导致所有内容显示在同一行。咱们来一步步修复：

1. 修正HTML结构 #

首先把<tbody>里多余的初始行去掉，让它保持空状态，这样后续动态生成的行可以直接作为它的子元素：

<table class="table table-striped table-bordered" id="editable-datatable">
  <thead>
    <tr>
      <th class="footable-sortable"> Host <span class="footable-sort-indicator"></span> </th>
    </tr>
  </thead>
  <tbody class="text-center" id="concat_here">
    <!-- 这里留空，等待JS动态插入行 -->
  </tbody>
</table>

2. 修改JS代码（两种可选方式） #

方式一：使用DOM创建元素（更规范，避免XSS风险） #

直接获取<tbody>元素，循环数据时创建新的<tr>和<td>，然后把它们添加到<tbody>中：

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  const obj = JSON.parse(xmlhttp.responseText);
  const tbody = document.getElementById('concat_here');
  
  // 先清空tbody，防止重复加载数据时出现重复内容
  tbody.innerHTML = '';
  
  obj.log_ast.forEach(item => {
    const tr = document.createElement('tr');
    const td = document.createElement('td');
    td.textContent = item.address;
    
    tr.appendChild(td);
    tbody.appendChild(tr);
  });
}

方式二：使用innerHTML拼接（更简洁，适合数据安全的场景） #

如果能确保item.address的内容是安全的（没有恶意脚本），可以用字符串拼接的方式一次性生成所有行的HTML，再赋值给<tbody>的innerHTML：

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  const obj = JSON.parse(xmlhttp.responseText);
  const tbody = document.getElementById('concat_here');
  let rowsHtml = '';
  
  obj.log_ast.forEach(item => {
    rowsHtml += `<tr><td>${item.address}</td></tr>`;
  });
  
  // 一次性替换tbody内容，比循环添加更高效
  tbody.innerHTML = rowsHtml;
}

为什么原来的代码会出错？ #

你之前的代码是把<tr>插入到<td id="row1">的内部，这违反了HTML的结构规则（<tr>只能是<table>、<thead>、<tbody>或<tfoot>的子元素）。浏览器遇到这种无效结构时，会自动调整DOM树，最终所有的<tr>都会被当成无效内容，被塞进原来的那个单元格里，所以所有数据都显示在了同一行。

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