如何调用display()渲染学生表格且不删除页面原有其他HTML内容

页面原有内容被清空的核心问题出在document.write()方法的特性上：当页面DOM加载完成后再调用document.write()，浏览器会自动执行document.open()清空整个已渲染的文档内容，再写入新的内容，自然会把原有其他HTML内容全部删掉。

你需要把渲染逻辑改成「指定DOM节点插入内容」的方式，不要用document.write()，步骤如下：

1. 先给你的学生列表表格的<tbody>标签加个唯一id，比如id="studentTbody"，示例HTML结构参考：

<table class="table">
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>课程</th>
      <th>生日</th>
      <th>测验成绩</th>
      <th>作业成绩</th>
      <th>考试成绩</th>
      <th>最终成绩</th>
    </tr>
  </thead>
  <tbody id="studentTbody">
    <!-- 学生列表会渲染在这里 -->
  </tbody>
</table>

2. 重写display()方法，直接向上面指定的tbody节点插入内容，同时每次渲染前先清空原有内容避免重复：

var students = [
  ["test", "test", "test"],
  ["test", "test", "test"]
];
students.sort();

function display() {
  // 获取要插入内容的tbody节点
  const tbody = document.getElementById('studentTbody');
  // 先清空原有行，避免重复渲染
  tbody.innerHTML = '';
  // 注意i前面加let，避免变成全局变量污染
  for (let i = 1; i < students.length + 1; i++) {
    // 拼接当前行的HTML字符串
    const trHtml = `
      <tr>
        <td>${i}</td>
        <td>${students[i - 1][0]}</td>
        <td>${students[i - 1][1]}</td>
        <td>${students[i - 1][2]}</td>
        <td><input type='number' class='form-control' id='quiz${i}' ></td>
        <td><input type='number' class='form-control' id='reqt${i}'></td>
        <td><input type='number' class='form-control' id='exam${i}'></td>
        <td><input type='number' class='form-control' id='pg${i}' readonly></td>
      </tr>
    `;
    // 把行追加到tbody里
    tbody.insertAdjacentHTML('beforeend', trHtml);
  }
}

function AddData() {
  const AddName = document.getElementById('Addname').value;
  const AddCourse = document.getElementById('AddCourse').value;
  const AddBDay = document.getElementById('AddBDay').value;

  if (AddName != "" && AddCourse != "" && AddBDay != "") {
    const Data = [AddName, AddCourse, AddBDay];
    students.push(Data);
    students.sort(); // 新增数据后重新排序
    display();
  } else {
    alert("Invalid Input");
  }
}

• 所有局部变量尽量用let/const声明，避免意外创建全局变量
• 如果后续需要修改学生数据，直接更新students数组后重新调用display()即可刷新列表，不会影响页面其他内容

内容的提问来源于stack exchange，提问作者MARTINEZ Francisco P