JS实现点击新增列表项时让总计行始终固定在列表底部

你现在的代码有两个直接导致效果异常的问题：

• 新创建的列表项错误添加了和外层列表容器相同的.item-list类名，会造成DOM选择逻辑混乱
• 调用appendChild()方法默认会把新元素追加到父容器的所有子元素末尾，而你的总计行是初始就存在于容器内的子元素，新项自然会被插到总计行下方。

1. 给总计行添加专属类名做定位标识
2. 移除新列表项上错误的重复类名，使用列表项专属类
3. 插入新项时使用insertBefore()方法，将新元素插入到总计行之前，保证总计行始终停留在列表最底部

JS代码 #

const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
// 提前获取固定在底部的总计行
const totalRow = document.querySelector(".total-row");

btn.addEventListener('click', function() {
  const listItem = document.createElement('div');
  listItem.classList.add('item');
  listItem.innerHTML = `<p>Potato Chips</p>`
  // 新项插入到总计行之前
  itemList.insertBefore(listItem, totalRow);
})

CSS代码 #

.list-container {
  height: 500px;
  width: 300px;
  background-color: cadetblue;
}

header {
  background-color: burlywood;
  border-style: groove;
}

.btn {
  margin-bottom: 20px;
}

/* 可选：给总计行添加区分样式 */
.total-row {
  border-top: 1px solid #222;
  font-weight: 700;
  padding: 8px 4px;
}

.item {
  padding: 6px 4px;
}

HTML代码 #

<div class="list-container">
  <header>
    <h4>List Time</h4>
    <button class="btn">click</button>
  </header>
  <div class="item-list">
    <!-- 给总计行添加专属类名 -->
    <div class="total-row">
      <p>Total: </p>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者gamer beast