为何JavaScript对象数组在HTML中重复渲染而非新增项？

核心问题 #

你每次调用render函数时，直接往.container里追加新元素，但之前已渲染的元素没被清除，再加上render遍历的是整个initial数组，旧元素自然会被重复添加一遍。

两种解决思路 #

思路1：渲染前清空容器 #

在render函数开头先清空.container的内容，再重新遍历整个数组渲染，确保每次都是全新的内容，不会有重复。
示例代码：

function render() {
  // 先清空容器
  const container = document.querySelector('.container');
  container.innerHTML = '';
  
  // 遍历数组创建并添加元素
  initial.forEach(freelancer => {
    const card = document.createElement('div');
    // 假设你的freelancer对象有name、price等属性，这里按需拼接内容
    card.innerHTML = `<h3>${freelancer.name}</h3><p>单价：${freelancer.price}</p>`;
    container.appendChild(card);
  });
}

思路2：只渲染新增的项 #

如果不想重新渲染所有元素，可以记录上次渲染到的位置，每次只处理新增的部分。比如用一个变量保存最后渲染的索引，每次调用render时只遍历数组中新增的元素。
示例代码：

// 全局变量记录上次渲染到的索引，初始为0（对应初始数组的长度）
let lastRenderedIndex = initial.length;

function render() {
  const container = document.querySelector('.container');
  // 只遍历从上次索引到数组末尾的新增元素
  for (let i = lastRenderedIndex; i < initial.length; i++) {
    const freelancer = initial[i];
    const card = document.createElement('div');
    card.innerHTML = `<h3>${freelancer.name}</h3><p>单价：${freelancer.price}</p>`;
    container.appendChild(card);
  }
  // 更新索引，下次从新的位置开始
  lastRenderedIndex = initial.length;
}

function addFreelancer() {
  const randomIdx = Math.floor(Math.random() * extraFreelancers.length);
  initial.push(extraFreelancers[randomIdx]);
  render();
}

额外提示 #

• 用思路1时，如果给渲染的元素绑定了事件监听，重新渲染后需要重新绑定，或者用事件委托（把监听绑在.container上）来避免重复绑定的麻烦。
• 思路2更高效，尤其是数组元素很多的时候，不需要重复创建和插入DOM节点。

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