循环生成DOM元素时如何移除旧元素 避免点击按钮重复追加内容

现有代码存在的问题 #

• 变量拼写错误：声明的按钮变量是btn，绑定事件时误写为bth，会直接报错导致事件不触发
• 旧元素移除逻辑完全无效：你通过document.createElement('p')创建的是全新的DOM元素，不可能等于undefined，也不是之前插入到容器内的旧元素，所以这段判断逻辑不会起到任何清理作用
• 没有提前清空容器内容：每次点击都直接向.container追加新元素，自然会出现内容叠加的问题
• 语义问题：遍历数组做DOM操作不需要生成新数组，用forEach比map更合适

修复后的完整代码 #

let arr = [
  {name: 'John', age: 31},
  {name: 'Eric', age: 55},
  {name: 'Kyle', age: 80},
  {name: 'Pedro', age: 44},
  {name: 'Ali', age: 35},
];

let btn = document.querySelector('button');
// 提前查询容器，避免每次点击反复查询DOM
let container = document.querySelector('.container');

btn.addEventListener('click', () => {
  // 第一步先清空容器内所有旧内容
  container.innerHTML = '';
  // 遍历生成新元素插入
  arr.forEach(info => {
    let p = document.createElement('p');
    p.append(info.name);
    container.append(p);
  })
})

核心修改说明 #

1. 修正了按钮变量的拼写错误
2. 将容器查询逻辑提前到事件回调外，减少重复DOM查询提升性能
3. 每次触发点击事件后，先将容器的innerHTML设为空字符串，直接清空所有之前插入的旧元素
4. 将map替换为语义更适配的forEach做数组遍历

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