本文介绍使用原生 javascript 实现点击任意 `
- ` 列表最顶端的简洁方法，核心利用 `element.prepend()` api，无需操作索引或 dom 重排逻辑。
要实现“点击列表项即置顶”的交互效果，关键在于监听每个 <li> 的点击事件，并在触发时将其作为第一个子元素插入到 <ul> 开头。现代浏览器支持的 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) 自动将当前 <li> 从原位置移出，并插入 <ul> 的第一个子节点位置；
- 无需遍历索引、无需操作 parentNode.insertBefore() 或 insertAdjacentElement() 等复杂 API；
- 兼容性良好（Chrome 54+、Firefox 49+、Edge 79+、Safari 10+），如需支持旧版 IE，可改用 ul.insertBefore(this, ul.firstChild) 作为降级方案。
⚠️ 注意事项：
- 务必使用 querySelectorAll("li") 而非 querySelector("li")（后者仅返回首个匹配项，无法为全部列表项绑定事件）；
- 若列表后续通过 JavaScript 动态添加新 <li>，需为新增项单独绑定事件，或采用事件委托方式（监听 <ul> 的 click 事件并判断 event.target.tagName === "LI"）；
- prepend() 会改变 DOM 结构，若页面依赖原有顺序做样式（如 :nth-child）或逻辑计算，请同步更新相关逻辑。
该方案简洁、高效、语义清晰，是现代前端开发中处理“置顶交互”的推荐实践。
