点击列表项快速置顶技巧

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

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

<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) 自动将当前
• 从原位置移出，并插入
  的第一个子节点位置；
  • 无需遍历索引、无需操作 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）或逻辑计算，请同步更新相关逻辑。

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

    今天关于《点击列表项快速置顶技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！