API获取数组点击排序按钮后列表重复，如何替换原列表？

从API获取了一组按字母排序的数据并存入peopleArray数组，通过forEach遍历渲染列表。点击排序按钮时希望反转列表顺序，但每次点击后列表都会在原内容基础上追加反转后的内容，而非替换原列表。请问如何实现重写/替换/重新排列原列表？排序逻辑中缺少了什么？

原始渲染代码 #

peopleArray.forEach((person) => {
      cardbox.innerHTML += `
          <div class="cardliststyle">
          <img class="profilepic" src="${person.picture.medium}" alt="picture" />
          <span class="circle"></span>
          <span class="square"></span>
            <div class="bg-white">
            <div class="name-city">
              <p class="name">${person.name.first} ${person.name.last}</p>
              <p class="city">${person.location.city}</p>
            </div>
            <div class="phone-email">
              <a class="email" href="mailto:${person.email}"> <i class="fa fa-envelope"></i></a>
              <a class="phone" href="tel:${person.phone}"><i class="fa fa-phone"></i></a>
            </div>
            </div>
          </div>
         `;
});

原始排序函数代码 #

sort.addEventListener("click", function () {
  peopleArray.reverse();

  peopleArray.forEach((person) => {
    cardbox.innerHTML += `
    <div class="cardliststyle">
    
      <img class="profilepic" src="${person.picture.medium}" alt="picture" />
      <div class="bg-white">
      <div class="name-city">
        <p class="name">${person.name.first} ${person.name.last}</p>
        <p class="city">${person.location.city}</p>
      </div>
      <div class="phone-email">
        <a class="email" href="mailto:${person.email}"> <i class="fa fa-envelope"></i></a>
        <a class="phone" href="tel:${person.phone}"><i class="fa fa-phone"></i></a>
      </div>
      </div>
    </div>
    
`;
  });
});

问题出在你用了innerHTML +=——这种写法是把新内容追加到旧内容后面，而不是替换。要实现替换，必须先清空容器，再重新渲染。另外，把渲染逻辑抽成函数能避免重复代码，更易维护。

1. 先清空容器再渲染 #

在排序后重新渲染之前，把cardbox的内容清空，这样新渲染的元素就会完全替换掉旧的：

sort.addEventListener("click", function () {
  peopleArray.reverse();
  // 清空容器，这一步是关键
  cardbox.innerHTML = '';
  peopleArray.forEach((person) => {
    cardbox.innerHTML += `
    <div class="cardliststyle">
      <img class="profilepic" src="${person.picture.medium}" alt="picture" />
      <div class="bg-white">
      <div class="name-city">
        <p class="name">${person.name.first} ${person.name.last}</p>
        <p class="city">${person.location.city}</p>
      </div>
      <div class="phone-email">
        <a class="email" href="mailto:${person.email}"> <i class="fa fa-envelope"></i></a>
        <a class="phone" href="tel:${person.phone}"><i class="fa fa-phone"></i></a>
      </div>
      </div>
    </div>
`;
  });
});

2. 优化：抽离渲染函数 #

把渲染逻辑单独写成一个函数，初始化和排序后都调用它，避免重复写相同的HTML拼接代码：

// 封装渲染函数，传入要渲染的数组
function renderPeople(arr) {
  cardbox.innerHTML = ''; // 每次渲染前先清空
  arr.forEach((person) => {
    cardbox.innerHTML += `
        <div class="cardliststyle">
        <img class="profilepic" src="${person.picture.medium}" alt="picture" />
        <span class="circle"></span>
        <span class="square"></span>
          <div class="bg-white">
          <div class="name-city">
            <p class="name">${person.name.first} ${person.name.last}</p>
            <p class="city">${person.location.city}</p>
          </div>
          <div class="phone-email">
            <a class="email" href="mailto:${person.email}"> <i class="fa fa-envelope"></i></a>
            <a class="phone" href="tel:${person.phone}"><i class="fa fa-phone"></i></a>
          </div>
          </div>
        </div>
       `;
  });
}

// 页面加载完成后初始化渲染
renderPeople(peopleArray);

// 排序按钮点击事件
sort.addEventListener("click", function () {
  peopleArray.reverse();
  renderPeople(peopleArray);
});

额外说明 #

• Array.reverse()会直接修改原数组，每次点击都会反转一次，刚好满足你切换排序顺序的需求。
• 必须先清空容器：如果跳过这一步，innerHTML +=会不断往容器里加新元素，导致列表越来越长。

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