本文介绍使用原生 javascript 实现点击任意 `
- ` 列表最顶端的简洁方法，核心利用 `element.prepend()` api，无需操作索引或 dom 重排逻辑。
- 的点击事件，并在触发时将其作为第一个子元素插入到
- 开头
以下是完整、健壮的实现代码：
- Color
- Size
- Price
✅ 优势说明：
- ul.prepend(this) 自动将当前
- 从原位置移出，并插入
- 的第一个子节点位置；
- 无需遍历索引、无需操作 parentNode.insertBefore() 或 insertAdjacentElement() 等复杂 API；
- 兼容性良好（Chrome 54+、Firefox 49+、Edge 79+、Safari 10+），如需支持旧版 IE，可改用 ul.insertBefore(this, ul.firstChild) 作为降级方案。
⚠️ 注意事项：
- 务必使用 querySelectorAll("li") 而非 querySelector("li")（后者仅返回首个匹配项，无法为全部列表项绑定事件）；
- 若列表后续通过 JavaScript 动态添加新
- ，需为新增项单独绑定事件，或采用事件委托方式（监听
- 的 click 事件并判断 event.target.tagName === "LI"）；
- prepend() 会改变 DOM 结构，若页面依赖原有顺序做样式（如 :nth-child）或逻辑计算，请同步更新相关逻辑。
该方案简洁、高效、语义清晰，是现代前端开发中处理“置顶交互”的推荐实践。
要实现“点击列表项即置顶”的交互效果，关键在于监听每个
