如何用JavaScript实现点击按钮将其移至列表底部？

需求与示例 #

点击列表中的按钮，将该按钮所在的<li>列表项移动到<ul>的最底部。例如点击BTN2后，列表顺序变为：BTN1、BTN3、BTN4、BTN2。

对应的HTML结构：

<div class="container">
  <div class="attp">
    <p class="textbox">ATTP</p>
    <ul>
      <li><button>BTN1</button></li>
      <li><button>BTN2</button></li>
      <li><button>BTN3</button></li>
      <li><button>BTN4</button></li>
    </ul>
  </div>
</div>

实现方案 #

核心逻辑 #

1. 监听按钮的点击事件
2. 定位到点击按钮所属的<li>元素
3. 将该<li>从原位置移除，再追加到<ul>的末尾

代码实现 #

方式1：事件委托（推荐）

利用事件冒泡给<ul>绑定事件，支持后续动态新增的列表项：

const list = document.querySelector('ul');

list.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const listItem = e.target.parentElement;
    list.removeChild(listItem);
    list.appendChild(listItem);
  }
});

方式2：直接绑定按钮事件

适合静态列表（列表项不会动态增减）：

const buttons = document.querySelectorAll('button');

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    const listItem = this.parentElement;
    const parentList = listItem.parentElement;
    parentList.removeChild(listItem);
    parentList.appendChild(listItem);
  });
});

关键知识点说明 #

• parentElement：获取当前元素的父DOM节点，这里按钮的父节点是<li>，<li>的父节点是<ul>
• removeChild()：从父节点中移除指定元素，元素本身不会被销毁
• appendChild()：将元素追加到父节点的子元素末尾，移动元素本质就是"移除+追加"的过程

内容的提问来源于stack exchange，提问作者jurica jelača