如何清除JavaScript生成的页面内容？

问题根源 #

你已经用contentDiv.innerHTML = ''清空了DOM内容，但全局变量objectsArr会在每次调用wordsCreation()时持续追加新对象，导致表格渲染时使用的是包含历史数据的数组，最终出现内容累加的情况。

修复方案 #

在wordsCreation()函数执行的最开始，清空objectsArr数组；或者直接将objectsArr声明在函数内部，彻底避免全局变量的副作用。

修改后的完整代码 #

HTML

<div class="container">
  <label for="symbol">单词长度</label>
  <input type="text" name="" id="symbol">
  <br>
  <label for="word">单词数量</label>
  <input type="text" name="" id="word">
  <br>
  <button onclick="wordsCreation()">生成单词与统计表格</button>
  <div class="content"></div>
</div>

CSS

body {
  background-color: rgb(9, 9, 34);
  color: white;
  font-size: 1.5rem;
}

table,
th,
td {
  border: 1px solid white;
  border-collapse: collapse;
}

JavaScript

let contentDiv = document.querySelector('.content')

function wordsCreation() {
  // 将数组声明在函数内部，每次调用都会初始化新数组
  let objectsArr = []
  const symbolsNumber = Number(document.querySelector('#symbol').value);
  const wordsNumber = Number(document.querySelector('#word').value);
  const lettersArr = 'abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVWXYZ';
  const vowelsArr = ['a', 'e', 'i', 'o', 'u'];

  contentDiv.innerHTML = ''

  for (let i = 0; i < wordsNumber; i++) {
    let createdWord = ''
    let lowerCase = 0;
    let uppererCase = 0;
    let vowel = 0;
    let consonant = 0;
    for (let counter = 0; counter < symbolsNumber; counter++) {
      let randomLetter = lettersArr[parseInt((Math.random() * 52))];
      // 统计大小写字母
      randomLetter != randomLetter.toLowerCase() ? uppererCase++ : lowerCase++;
      // 统计元音和辅音
      for (let v of vowelsArr) {
        if (randomLetter == v || randomLetter.toLowerCase() == v) {
          vowel++
        }
      }
      createdWord += randomLetter
    }
    consonant = createdWord.length - vowel

    let createdTag = document.createElement('p')

    if (vowel > consonant) {
      createdTag.style.color = 'red'
    } else if (vowel < consonant) {
      createdTag.style.color = 'blue'
    } else {
      createdTag.style.color = 'green'
    }

    createdTag.innerText = createdWord
    contentDiv.appendChild(createdTag)

    let wordStats = {
      'word': createdWord,
      'vowel': vowel,
      'consonant': consonant,
      'uppererCase': uppererCase,
      'lowerCase': lowerCase
    }

    objectsArr.push(wordStats)
  }

  // 处理空数组情况（比如输入无效数字时）
  if (objectsArr.length === 0) return

  let table = document.createElement('table')
  contentDiv.appendChild(table)

  // 创建表头
  let headerTr = document.createElement('tr')
  Object.keys(objectsArr[0]).forEach(key => {
    let th = document.createElement('th')
    th.innerText = key
    headerTr.appendChild(th)
  })
  table.appendChild(headerTr)

  // 创建表格内容行
  objectsArr.forEach(stats => {
    let tr = document.createElement('tr')
    Object.values(stats).forEach(value => {
      let td = document.createElement('td')
      td.innerText = value
      tr.appendChild(td)
    })
    table.appendChild(tr)
  })
}

额外优化说明 #

1. 将objectsArr移到函数内部，避免全局变量污染，从根源上解决旧数据残留问题。
2. 替换部分循环为forEach方法，让代码更简洁易读。
3. 添加空数组判断，避免输入无效值时出现报错。
4. 移除不必要的模板字符串，直接使用变量简化代码。

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