JavaScript映射追加子元素时升降序失效：如何阻止自动排序？

问题根源 #

1. 下拉选项值拼写错误：升序选项的value写成了"aesc"，正确应为"asc"，导致切换回升序时接口参数错误。
2. 表格未清空旧数据：每次调用displayData时，都创建新的tbody并追加到table中，旧数据未被移除，页面显示的是多次请求数据的叠加，而非最新排序结果。

修复步骤 #

1. 修正下拉选项值：将升序选项的value和文本都改为正确的"asc"。
2. 渲染前清空表格：在displayData函数中，先清空table的现有内容，再添加新的tbody。

修改后的完整代码 #

const app = document.getElementById("app");
const table = document.createElement("table");
const loader = document.createElement("div");
const API_URL = `https://fakestoreapi.com`;
let ORDER = `asc`;
loader.innerHTML = `Loader..`;

function hideLoader() {
  app.removeChild(loader);
}

function showLoader() {
  app.appendChild(loader);
}

app.innerHTML = `
<h1>List</h1>
`;

const select = document.createElement("select");
const option1 = document.createElement("option");
const option2 = document.createElement("option");
// 修正拼写错误：aesc → asc
option1.value = "asc";
option1.innerHTML = "asc";
option2.value = "desc";
option2.innerHTML = "desc";
select.appendChild(option1);
select.appendChild(option2);
app.appendChild(select);
select.addEventListener("change", (e) => handleChange(e));

function handleChange(e) {
  fetchData(e.target.value);
}

async function fetchData(order) {
  showLoader();
  const response = await fetch(`${API_URL}/products?sort=${order}`);
  const data = await response.json();
  displayData(data);
}

function displayData(data) {
  // 清空表格现有内容
  table.innerHTML = "";
  const tbody = document.createElement("tbody");
  console.log("data", data);
  data.forEach((item) => {
    const tr = document.createElement("tr");
    tr.key = item.id;
    tr.innerHTML = `
        <td>${item.id}</td>
        <td>${item.title}</td>
        <td>${item.price}</td>
    `;
    tbody.appendChild(tr);
  });
  table.appendChild(tbody);
  app.appendChild(table);
  hideLoader();
}

fetchData(ORDER);

关键修改说明 #

• 修正升序选项的拼写错误，确保接口参数正确传递。
• 在displayData开头添加table.innerHTML = "";，每次渲染新数据前清空表格，彻底移除旧数据，保证页面只显示最新排序结果。

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