使用 JavaScript 更改或清除 html 表答案

【问题标题】：Changing or clearing html table with JavaScript使用 JavaScript 更改或清除 html 表
【发布时间】：2021-08-13 18:18:26
【问题描述】：

我正在使用以下代码构建一个 html 表并将其发送到我的页面：

function generateTableHead(table, data) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let key of data) {
      let th = document.createElement("th");
      let text = document.createTextNode(key);
      th.appendChild(text);
      row.appendChild(th);
    }
  }

function generateTable(table, data) {
    for (let element of data) {
      let row = table.insertRow();
      for (key in element) {
        let cell = row.insertCell();
        let text = document.createTextNode(element[key]);
        cell.appendChild(text);
      }
    }
  }

这组函数在页面的初始呈现时调用，并且在另一个函数中调用，该函数在下拉菜单的每次更改时调用。这导致堆叠表而不是更改表。我知道这是因为我将文本附加到已经包含表格的 html 位置。是否有几行代码我可以在函数的开头放置在生成新表之前清除旧表，还是我在考虑这个问题完全错误？

【问题讨论】：

标签： javascript html html-table onchange

【解决方案1】：

我这里没有上下文，但是您可以将设置 innerHTML 的 HTML 元素的 HTML 内容清除为空字符串：

const table = document.getElementById('table')
table.innerHTML = ''

【讨论】：