没问题！这两个需求都能轻松实现，我给你分步拆解清楚：

你已经会在现有按钮后追加元素，那要实现在指定位置插入，核心就是利用DOM的insertBefore()方法，直接把新按钮插到"+ Add Person"按钮的前面（也就是所有功能按钮和添加按钮的中间位置）。

实现步骤&代码示例 #

假设你的初始HTML结构是这样的：

<div class="button-container">
  <button class="person-button">Person 1</button>
  <!-- 新按钮将插入到这里 -->
  <button id="add-person-btn">+ Add Person</button>
</div>

对应的JavaScript代码：

// 获取添加按钮和它的父容器
const addBtn = document.getElementById('add-person-btn');
const btnContainer = addBtn.parentElement;

// 给添加按钮绑定点击事件
addBtn.addEventListener('click', () => {
  // 1. 创建新按钮元素
  const newPersonBtn = document.createElement('button');
  newPersonBtn.className = 'person-button';
  // 自动生成按钮文本（统计现有功能按钮的数量）
  const currentPersonCount = document.querySelectorAll('.person-button').length;
  newPersonBtn.textContent = `Person ${currentPersonCount + 1}`;

  // 2. 关键：插入到"+ Add Person"按钮的前面
  btnContainer.insertBefore(newPersonBtn, addBtn);
});

每次点击"+ Add Person"，新按钮都会精准插在最后一个功能按钮和添加按钮之间，完全符合你的需求。

这里默认你用的是CSS Grid布局实现的GridView（最常用的方案），要实现“满列后自动垂直扩展”，只需要给Grid容器设置固定的最大列数，然后让它自动换行即可。

实现代码示例 #

.grid-container {
  display: grid;
  /* 设置最大列数为3，你可以根据需求改成其他数字 */
  grid-template-columns: repeat(3, 1fr);
  /* 自动按行排列元素（超出列数就换行到下一行） */
  grid-auto-flow: row;
  /* 可选：设置元素之间的间距 */
  gap: 1rem;
  /* 可选：让容器占满可用宽度 */
  width: 100%;
}

如果想要自适应容器宽度（比如容器变窄时自动减少列数，但最多不超过设定的最大值），可以用下面的写法：

.grid-container {
  display: grid;
  /* 最多3列，每列最小宽度200px，自动填充剩余空间 */
  grid-template-columns: repeat(min(3, auto-fill), minmax(200px, 1fr));
  grid-auto-flow: row;
  gap: 1rem;
}

这样当GridView里的元素数量超过最大列数时，会自动新增行，实现垂直扩展的效果。

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