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

在网页交互里，通过点击把某个列表项移动到顶部是一个很实用的功能。比如用户想置顶一条记录，只需点一下，该项就排到最前面。下面看看如何用原生JavaScript实现这个效果。

实现原理

核心逻辑是：监听列表的点击事件，找到被点击的 li 元素，调用父节点的 insertBefore 方法，将它插入到第一个子节点之前。这样被点击项就成了新的开头。

基础HTML结构

先准备一个简单的无序列表，后续通过脚本让点击生效。

<ul id="list">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  <li>项目四</li>
</ul>

JavaScript处理逻辑

使用事件委托在 ul 上监听点击，避免给每个 li 单独绑事件。点击后把目标项移到顶部。

// 获取列表容器
var list = document.getElementById('list');

// 监听列表的点击事件
list.addEventListener('click', function(event) {
  // 找到被点击的列表项
  var target = event.target;
  if (target.tagName === 'LI') {
    // 将该项移动到列表顶部
    list.insertBefore(target, list.firstChild);
  }
});

使用prepend的更简单写法

现代浏览器支持 parentNode.prepend 方法，能直接把节点插到最前面，代码更直观。

var list = document.getElementById('list');

list.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'LI') {
    // prepend会把节点作为第一个子元素插入
    list.prepend(target);
  }
});

注意事项

• 如果列表项内有子元素，点击子元素时 event.target 可能不是 li，可用 closest('li') 获取最近的项。
• 移动节点时它原有的事件监听会保留，因为节点只是换了位置没有被重建。
• 在旧版浏览器中 prepend 可能不支持，此时用 insertBefore 更稳妥。

兼容写法示例

list.addEventListener('click', function(event) {
  var item = event.target.closest('li');
  if (item && list.contains(item)) {
    if (list.firstChild) {
      list.insertBefore(item, list.firstChild);
    } else {
      list.appendChild(item);
    }
  }
});

通过上述方法，就能轻松实现点击列表项将其置顶的交互，逻辑清晰且不依赖任何框架。

JavaScriptDOM操作列表排序修改时间：2026-07-28 05:33:15