将元素移动到列表顶部 JavaScript

有时候我们需要将一个已经存在于列表中的元素移动到列表的顶部位置，这种需求在Web开发中非常常见。这篇文章将会向大家分享如何使用JavaScript来实现这一功能。

代码实现

我们可以使用以下的代码来将指定元素移动到列表顶部，假设我们的目标元素是target，列表是list：

const target = document.getElementById('target');
const list = document.getElementById('list');
list.insertBefore(target, list.childNodes[0]);

代码分成三部分：

1. 通过getElementById()方法获取到目标元素和列表。

2. 使用insertBefore()方法，将目标元素插入到列表的第一个子节点前面。

3. 请确保你已经在HTML代码中定义了列表，并且每个列表项应该具备唯一的ID属性。这意味着，你需要给每个列表项添加一个唯一的ID属性。

测试案例

下面是一个测试案例，我们在列表中添加了一些元素，当我们点击其中的元素后，目标元素将会被移动到列表顶部。

<ul id="list">
  <li id="item1" onclick="moveToTop(this)">Item 1</li>
  <li id="item2" onclick="moveToTop(this)">Item 2</li>
  <li id="item3" onclick="moveToTop(this)">Item 3</li>
  <li id="item4" onclick="moveToTop(this)">Item 4</li>
  <li id="item5" onclick="moveToTop(this)">Item 5</li>
</ul>

<script>
function moveToTop(item) {
  const list = document.getElementById('list');
  list.insertBefore(item, list.childNodes[0]);
}
</script>

总结

使用JavaScript在列表中将元素移动到顶部是非常方便的，只需要使用getElementById()和insertBefore()方法，就可以轻松地实现这一功能。但是请注意，每个列表项都需要有唯一的ID属性。

参考链接

• insertBefore()
• getElementById()