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

。现代 浏览器 支持的 Element.prepend() 方法正是为此场景而生——它会将指定节点插入到调用元素的子节点最前方，且自动处理节点的移除与重挂载（即无需手动 remove()）。

以下是完整、健壮的实现代码：

   
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）或逻辑计算，请同步更新相关逻辑。

该方案简洁、高效、语义清晰，是现代 前端 开发中处理“置顶交互”的推荐实践。