Uncaught TypeError报错求助：无法设置null的innerHTML属性

这个报错的核心原因是：你最后一行代码中尝试设置innerHTML的DOM元素不存在（代码获取到的是null），所以无法对其属性进行赋值。结合你的需求，给你几个具体的排查和解决方向：

• 核对最后一行代码里获取DOM元素的选择器（比如getElementById的ID值、querySelector的选择器字符串），确保和HTML中实际存在的元素完全匹配，注意大小写、拼写、符号都不能错。
• 检查JS代码的执行时机：如果你的JS脚本写在<head>里，会在DOM还没加载完成时就运行，自然找不到目标元素。解决方法是把JS脚本移到</body>标签的前面，或者用DOMContentLoaded事件包裹核心代码：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的所有代码放在这里
  });
  

• 确认HTML结构中确实存在你要插入表格的目标元素，有没有误删除标签、或者写错元素类型。

结合你的需求（生成显示成绩≥90学生的表格+标题），给你一个可参考的代码示例：

HTML结构 #

<!-- 页面中预留一个容器用于放置表格 -->
<div id="grade-a-students"></div>

JS代码 #

// 模拟学生考试记录数据
const examRecords = [
  {name: "赵六", score: 91},
  {name: "孙七", score: 88},
  {name: "周八", score: 96}
];

// 筛选出成绩≥90的学生
const gradeAStudents = examRecords.filter(student => student.score >= 90);

// 构建包含标题和表格的HTML内容
let tableHtml = `<h3>等级A学生成绩表</h3>`;
tableHtml += `<table border="1">
                <tr>
                  <th>姓名</th>
                  <th>成绩</th>
                </tr>`;
gradeAStudents.forEach(student => {
  tableHtml += `<tr>
                  <td>${student.name}</td>
                  <td>${student.score}</td>
                </tr>`;
});
tableHtml += `</table>`;

// 获取目标容器并插入内容（先判断元素是否存在）
const targetContainer = document.getElementById('grade-a-students');
if (targetContainer) {
  targetContainer.innerHTML = tableHtml;
} else {
  console.error("未找到用于放置表格的容器元素");
}

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