在日常开发中，我们常常需要实现一些小而美的交互功能，比如让内容可以被用户手动置顶。今天就来聊聊如何用JavaScript轻松搞定这个需求！👇
首先，我们需要一个简单的HTML结构，比如几个列表项 `
核心逻辑很简单：为每个列表项绑定一个点击事件，当用户点击某个项目时，将其移动到列表顶部。可以通过调整DOM节点的位置来实现这一点。具体操作是先将目标元素从原位置移除，再插入到父容器的第一个子元素位置。代码如下：
```javascript
document.querySelectorAll('li').forEach(item => {
item.addEventListener('click', () => {
const parent = item.parentNode;
parent.removeChild(item);
parent.insertBefore(item, parent.firstChild);
});
});
```
这样，每次点击都能让所选内容“一飞冲天”！🤩 这样不仅提升了用户体验，也让页面更加动态有趣。快去试试吧，给你的网页加点小惊喜！💫
标签：
免责声明：本文由用户上传，如有侵权请联系删除！