如何通过DOM操作向列表添加元素且避免原列表重复

云原生阿岚

2026-7-19

问题原因

你遇到的重复显示问题，核心是每次调用arrayList(myArray)时，都会遍历整个数组并追加所有元素到列表中——初始页面已经渲染了原数组的所有项，添加新项目后再次调用这个函数，就会把包括原有项在内的所有元素又添加一遍，导致重复。

解决方案1：重置列表后重新渲染（适合需要统一更新样式的场景）

修改arrayList函数，在渲染新元素前先清空列表原有内容，这样每次调用都会生成完整且不重复的列表：

// 修改后的arrayList函数
arrayList = (arr) => {
  // 先清空列表里的所有原有元素
  list1.innerHTML = '';
  arr.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item;
    list1.appendChild(li)
  });
  // 重新设置红色样式（因为原有元素被清空替换了）
  idSelector();
}

解决方案2：仅添加新输入的项（更高效）

不需要重新渲染整个数组，直接把用户输入的新项单独创建为li元素添加到列表中，性能更好且不会出现重复：

// 修改后的updateList函数
updateList = (arr) => {
  let blue = document.getElementById("input").value;

  if (blue === "") {
    alert("Please enter a value if you wish to add something to your list.")
  } else {
    arr.push(blue);
    console.log(arr)
    // 直接创建新列表项并添加
    let li = document.createElement('li');
    li.textContent = blue;
    list1.appendChild(li);
    // 清空输入框，优化用户体验
    document.getElementById("input").value = '';
  }
}