如何避免向DOM中添加重复元素？现有代码方案无效求助

你遇到的核心问题是数组作用域错误，导致所有去重逻辑完全失效，具体分析和修复方案如下：

问题根源 #

你的items数组是在addItem函数内部声明的局部变量：

function addItem(item) {
  let items = []; // 每次调用函数都会重新创建空数组
  // ...
}

每次点击按钮调用addItem时，都会生成一个全新的空数组，所以!items.includes(item)永远为true，必然会把item推入数组，随后的forEach循环也会重复创建并添加DOM元素。你尝试的几种去重方法都没解决这个根本问题，因此毫无效果。

修复方案 #

1. 将items数组移到函数外部，作为持久化变量，保留之前的添加记录
2. 仅当成功添加新元素到数组时，才创建对应的DOM元素并追加，避免重复渲染已有内容

修改后的完整代码：

JavaScript #

const btn = document.querySelector("button");
// 把数组声明移到函数外部，持久化存储已添加的元素
let items = [];

btn.addEventListener("click", () => {
  addItem(btn.innerText);
});

function addItem(item) {
  // 基于持久化的数组判断是否已存在该元素
  if (!items.includes(item)) {
    items.push(item);
    // 仅在新增元素时创建并添加DOM
    const li = Object.assign(document.createElement("li"), {
      innerText: item
    });
    document.body.appendChild(li);
  }
}

CSS #

@import url("https://cdn.jsdelivr.net/gh/KunalTanwar/organise.css/css/organise.inter.min.css");
body {
  display: grid;
  place-items: center;
}

button {
  border: 0;
  background: none;
  padding: 1rem 2rem;
  box-shadow: inset 0 0 0 1px gray;
}

HTML #

<button> Add Me </button>

额外优化建议 #

如果需要支持更复杂的元素去重（比如对象类型），可以改用Set来存储元素，判断存在性的效率更高：

const items = new Set();

function addItem(item) {
  if (!items.has(item)) {
    items.add(item);
    const li = Object.assign(document.createElement("li"), {
      innerText: item
    });
    document.body.appendChild(li);
  }
}

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