当前位置：首页 > JavaScript

js实现列表效果

2026-04-07 11:08:46JavaScript

实现基础列表渲染

使用 document.createElement 动态创建列表元素，通过遍历数据生成列表项：

const data = ["Item 1", "Item 2", "Item 3"];
const ul = document.createElement("ul");
data.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  ul.appendChild(li);
});
document.body.appendChild(ul);

动态更新列表内容

通过数组操作更新 DOM，实现列表动态变化：

const list = document.querySelector("ul");
const newItem = document.createElement("li");
newItem.textContent = "New Item";
list.appendChild(newItem); // 添加新项
list.removeChild(list.firstChild); // 移除首项

添加交互事件

为列表项绑定点击事件，实现交互功能：

document.querySelectorAll("li").forEach(li => {
  li.addEventListener("click", () => {
    li.style.textDecoration = "line-through"; // 点击后添加删除线
  });
});

使用模板字符串优化

通过模板字符串批量生成列表 HTML 结构：

const items = ["Apple", "Banana", "Orange"];
const html = items.map(item => `<li>${item}</li>`).join("");
document.querySelector("ul").innerHTML = html;

实现排序功能

结合数组排序方法更新列表显示顺序：

const sortList = () => {
  const ul = document.querySelector("ul");
  const items = [...ul.children];
  items.sort((a, b) => a.textContent.localeCompare(b.textContent));
  ul.innerHTML = "";
  items.forEach(item => ul.appendChild(item));
};

虚拟列表优化（大数据量）

通过动态渲染减少 DOM 节点数量，提升性能：

js实现列表效果

const visibleItems = 10;
let startIndex = 0;
function renderChunk(data) {
  const chunk = data.slice(startIndex, startIndex + visibleItems);
  document.querySelector("ul").innerHTML = chunk.map(item => `<li>${item}</li>`).join("");
}
// 滚动时更新 startIndex 并重新渲染