如何将动态生成的table插入到指定HTML表格单元格中？

安全阿岳

2026-7-27

解决方案

1. 修复HTML结构错误

你的原始HTML中第一个<tr>标签未闭合，这会导致浏览器错误解析DOM树，使得resultsCell的实际父元素不符合预期，进而导致动态表格插入位置错误。修正后的HTML如下：

<table>
    <tr>
        <td id="resultsCell" rowspan="2"></td>
        <td>
            <object id="map" class="mapClass"></object>
        </td>
    </tr>
    <tr>
        <td>
            <button id="download">Download Map</button>
        </td>
    </tr>
</table>

2. 确保JS代码在DOM加载完成后执行

如果JS代码在DOM尚未完全加载时运行，document.getElementById("resultsCell")可能返回null，导致表格被默认插入到body标签下。可以通过两种方式解决：

将JS代码放在HTML文档的<body>标签末尾
用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
    var table = document.createElement("table");
    table.setAttribute("class", "resultsTable");
    table.setAttribute("id", "resultsTable");
    
    // 示例：添加测试内容验证插入效果
    var testRow = document.createElement('tr');
    var testCell = document.createElement('td');
    testCell.textContent = '动态表格测试内容';
    testRow.appendChild(testCell);
    table.appendChild(testRow);
    
    document.getElementById("resultsCell").appendChild(table);
});