如何通过点击将列表项移动到顶部

要实现“点击列表项即置顶”的交互效果，核心在于利用 DOM 的 prepend() 方法——该方法可将指定节点插入到父容器的起始位置，并自动从原位置移除（DOM 节点具有唯一性，重复添加会自动迁移）。

以下为完整、可直接运行的解决方案：

  
Color
  
Size
  
Price

✅ 关键说明：

• ul.prepend(this) 是实现置顶的核心：它将当前点击的
• 插入
  的第一个子节点位置，语义清晰、性能优异；
• 使用 querySelectorAll("li") 而非 querySelector("li")，后者仅返回首个匹配元素（返回单个节点，无 length 属性），原问题中 listItems.length 会报错；
• 避免在循环中使用 var 和闭包陷阱（如原代码中的 $i 变量名错误及未声明的 i 引用），forEach 提供安全、直观的遍历方式；
• 事件监听器绑定在每个
• 上，响应及时，无需事件委托（除非列表动态增删频繁，此时可升级为委托方案）。

⚠️ 注意事项：

• 若列表项包含复杂结构（如内嵌按钮、表单控件），建议为
• 设置 cursor: pointer 并添加 user-select: none 提升交互反馈；
• 在旧版 Safari（
• 多次点击同一项不会导致重复或异常——prepend() 对已存在子节点的操作是幂等的（位置已为首位时无实际变动）。

此方法轻量、可维护性强，是前端日常交互开发中的典型 DOM 操作范例。