JS表单新增内容时列表重复渲染旧条目问题求助

• 你的clicker函数每次触发时，都会全量遍历整个leadTracker数组，并且直接通过+=往列表DOM的innerText后追加内容，没有先清空上一次渲染的旧内容，所以每次新增条目都会把之前所有的历史条目再重复渲染一遍。

测试场景复现逻辑：
第一次提交bro：数组为['bro']，列表渲染后内容为bro
第二次提交back：数组为['bro', 'back']，函数先追加bro再追加back，最终内容变成brobroback，即你观察到的重复现象。

提供两种可选修复方式：

方案1：渲染前清空旧内容（改动最小，适合数据量小的场景） #

修改clicker函数，每次循环渲染前先清空列表的已有内容：

function clicker() {
  // 清空上一次渲染的所有内容
  Listing.innerText = ''
  for (let i = 0; i < leadTracker.length; i++) {
    // 末尾加换行符区分不同条目
    Listing.innerText += leadTracker[i] + '\n'
    console.log(leadTracker)
  }
}

方案2：仅追加新条目（性能更优，无需每次重渲全量数据） #

不需要遍历整个数组，每次提交时仅把新增内容追加到列表末尾即可，还可以新增空值校验避免无效提交：

inputButton.addEventListener("click", function () {
  const inputVal = inputText.value.trim()
  // 过滤空内容提交
  if (!inputVal) return
  leadTracker.push(inputVal)
  // 直接追加新内容，无需调用全量渲染的clicker函数
  Listing.innerText += inputVal + '\n'
  console.log(leadTracker)
})

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