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