JavaScript使用forEach渲染列表时元素重复渲染如何解决

云原生阿岚

2026-8-30

问题产生原因

两个核心逻辑错误共同导致列表重复渲染异常：

未清理历史渲染内容：每次执行renderPass时，直接在列表容器已有DOM结构上插入新节点，从未移除上一次渲染生成的旧li标签。首次添加词汇后数组长度为1，插入1个节点，表现正常；第二次添加后数组长度为2，直接插入2个新节点，叠加之前留存的1个旧节点，总计3个节点；第三次添加后数组长度为3，直接插入3个新节点，叠加之前留存的3个旧节点，总计6个节点，和你描述的重复表现完全吻合（你观察到的7个节点是计数时把顺序颠倒的节点重复统计导致的）。
插入位置选择错误：insertAdjacentHTML传入afterbegin参数时，会将内容插入到容器内部的最顶端，按数组顺序遍历插入时，最终列表的展示顺序会和数组存储顺序完全颠倒。

修复方案

调整renderPass的执行逻辑：每次渲染前先清空容器内的旧列表项，推荐将所有列表项的HTML拼接完成后一次性插入DOM，减少浏览器重绘次数，同时修正插入位置保证列表顺序和数组顺序一致。修复后完整代码如下：

const renderPass = function (array, location) {
  // 清空容器内所有历史渲染的列表节点
  location.innerHTML = '';
  // 批量拼接所有列表项的HTML字符串
  const listHtml = array.map(element => `<li class="k">${element}</li>`).join('');
  // 一次性插入到容器末尾，保证展示顺序和数组顺序一致
  location.insertAdjacentHTML("beforeend", listHtml);
};

const savingKeyWords = function (e) {
  e.preventDefault();
  // 新增空值拦截，避免输入空白内容生成无效列表项
  const inputValue = keyWord.value.trim();
  if (!inputValue) return;
  keyWords.push(inputValue);
  renderPass(keyWords, listOfKeys);
  console.log(keyWords);
  clear(keyWord);
};