JavaScript：对象数组排序后如何清除旧内容并重新渲染页面

要实现排序后清除旧内容并渲染新数组，需要对现有代码做两处关键修改：

1. 重写displayObjects函数，添加清空容器逻辑 #

原函数每次只是往容器里追加新元素，旧内容不会被移除。修改后先清空容器，再渲染排序后的数组：

function displayObjects(objectsDisplayed) {
    const container = document.getElementById('div-to-hold-data');
    // 清空容器内所有旧内容
    container.innerHTML = '';
    
    // 遍历传入的排序后数组，渲染每个元素
    for (let item of objectsDisplayed) {
        // 替换成你实际的渲染代码（示例：创建包含名称和图片的元素）
        const productElement = document.createElement('div');
        productElement.innerHTML = `
            <p>${item.name}</p>
            <img src="${item.image}" alt="${item.name}">
        `;
        container.appendChild(productElement);
    }
}

注：原函数里直接appendChild('code')是错误写法，这里替换成了实际的元素创建逻辑，你可以根据自己的需求调整渲染内容。

2. 修正sortChange函数的调用逻辑 #

原函数中存在两个问题：一是传入displayObjects的objectsDisplayed变量未定义，二是排序条件可能有误（比如"name-decending"分支里用了image排序，应该改成按名称降序）。修改后：

function sortChange() {
  let sortByValue = sortBy.value;
  if (sortByValue === "category1") {
    // 按名称升序排序
    myArray.sort(sortProducts("name"));
  } else if (sortByValue === "name-decending") {
    // 按名称降序排序（利用sortProducts的负号前缀逻辑）
    myArray.sort(sortProducts("-name"));
  }
  // 将排序后的数组传入displayObjects渲染
  displayObjects(myArray);
  // 调试用：打印排序后的数组
  console.log(myArray);
}

原代码不生效的原因 #

• 原displayObjects没有清空容器，导致新元素追加在旧元素后面，视觉上看不出排序变化；
• 原函数参数objectsDisplayed未被使用，始终渲染全局的myArray，但调用时传了未定义的变量，逻辑混乱；
• 排序分支里的console.log(objectsDisplayed)无意义，应该打印排序后的myArray。

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