除设置table.innerHTML=""外，如何避免学生列表重复渲染？

算力阿峰

2026-7-31

解决学生重复添加问题的替代方案

你遇到的问题根源是每次调用renderStudents()时，都会遍历整个students数组，为每个学生重新创建并添加<tr>元素，导致之前已存在的学生被重复渲染。除了使用table.innerHTML = ""，还有以下两种更稳妥的方案：

方案一：仅渲染新增的学生

直接在提交表单后，只针对刚添加的学生创建DOM元素并插入表格，无需重新遍历整个数组。这样既高效又避免重复：

修改表单提交事件代码：

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const student = {
    name: this.name.value,
  };

  students.push(student);
  this.reset();
  // 调用新增的单学生渲染函数
  renderSingleStudent(student);
});

新增renderSingleStudent()函数：

function renderSingleStudent(student) {
  const tr = document.createElement("tr");
  const tdName = document.createElement("td");
  tdName.innerText = student.name; // 注意你原代码里的`tdname`是拼写错误，应为`tdName`
  tr.append(tdName);
  table.appendChild(tr);
}

方案二：安全清空现有行后重新渲染

如果还是需要全量渲染（比如后续有编辑学生信息的需求），可以通过DOM操作精准删除表格中的数据行（保留表头），替代innerHTML = ""：

修改renderStudents()函数：

function renderStudents() {
  // 假设表格第一行是表头，删除所有非表头的行
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }

  students.forEach((student) => {
    const tr = document.createElement("tr");
    const tdName = document.createElement("td");
    tdName.innerText = student.name; // 修正拼写错误
    tr.append(tdName);
    table.appendChild(tr);
  });
}