本文介绍如何使用原生 javascript 实现点击任意 `
- ` 列表的最顶端，无需依赖框架，代码简洁高效且兼容现代浏览器。
要实现“点击列表项即置顶”的交互效果，核心在于利用 DOM 的 prepend() 方法——该方法可将指定节点插入到父容器的起始位置，并自动从原位置移除（DOM 节点具有唯一性，重复添加会自动迁移）。
以下为完整、可直接运行的解决方案：
<ul>
<li>Color</li>
<li>Size</li>
<li>Price</li>
</ul>
<script>
const ul = document.querySelector("ul");
const listItems = ul.querySelectorAll("li");
function moveToTop() {
ul.prepend(this); // this 指向被点击的 li 元素
}
listItems.forEach(item => {
item.addEventListener("click", moveToTop);
});
</script>✅ 关键说明：
- ul.prepend(this) 是实现置顶的核心：它将当前点击的 <li> 插入 <ul> 的第一个子节点位置，语义清晰、性能优异；
- 使用 querySelectorAll("li") 而非 querySelector("li")，后者仅返回首个匹配元素（返回单个节点，无 length 属性），原问题中 listItems.length 会报错；
- 避免在循环中使用 var 和闭包陷阱（如原代码中的 $i 变量名错误及未声明的 i 引用），forEach 提供安全、直观的遍历方式；
- 事件监听器绑定在每个 <li> 上，响应及时，无需事件委托（除非列表动态增删频繁，此时可升级为委托方案）。
⚠️ 注意事项：
- 若列表项包含复杂结构（如内嵌按钮、表单控件），建议为 <li> 设置 cursor: pointer 并添加 user-select: none 提升交互反馈；
- 在旧版 Safari（<15.4）中 prepend() 支持良好，但若需支持 IE，则需降级使用 insertBefore(ul.firstChild) 方案；
- 多次点击同一项不会导致重复或异常——prepend() 对已存在子节点的操作是幂等的（位置已为首位时无实际变动）。
此方法轻量、可维护性强，是前端日常交互开发中的典型 DOM 操作范例。
