通过 javascript 监听列表项点击事件，利用 `element.prepend()` 方法将被点击的 `
- ` 的最前面，实现动态置顶效果。代码简洁高效，兼容现代浏览器。
- 绑定点击事件，触发时将其从当前 DOM 位置移除，并作为第一个子元素插入到其父
- 中。
以下为推荐实现方案（已修正原问题中 querySelector("li") 返回单个元素、循环索引错误 $i 等常见问题）：
- Color
- Size
- Price
✅ 关键点说明：
- querySelectorAll("li") 正确获取所有
- 元素集合（类数组），避免 querySelector("li") 仅返回首个元素的错误；
- ul.prepend(this) 是现代 DOM 方法，直接将目标元素插入
- 开头，无需手动 remove() + insertBefore()，语义清晰且性能更优；
- 使用 forEach 遍历并绑定事件，比传统 for 循环更安全（避免闭包导致的 this 指向问题）；
- 事件处理器中 this 自动绑定为当前被点击的
- ，无需额外传参或查找。
⚠️ 注意事项：
- prepend() 在 IE 浏览器中不支持，如需兼容 IE，请改用 ul.insertBefore(this, ul.firstChild)；
- 若列表含复杂结构（如嵌套元素、事件监听器或 Vue/React 组件），直接操作 DOM 可能影响框架状态，建议结合响应式数据驱动更新；
- 多次点击同一项时，prepend() 会重复将其置顶（无副作用），符合预期行为。
该方法轻量、可复用，适用于导航菜单、筛选标签、待办事项优先级调整等场景。
在网页交互开发中，常需实现“点击即置顶”的列表操作（如优先显示用户关注的选项）。核心思路是：为每个
