如何在行末尾添加子DIV？点击子DIV定位所在行并添加子DIV的问题

我看你现在遇到的问题是点击任意子DIV时，新元素只会加到第一行，对吧？这大概率是因为你原代码里判断“当前元素所在行”的逻辑有缺失，再加上var循环绑定事件的作用域坑，才导致了这个问题。咱们一步步来解决你的两个需求：

需求1：主动给指定行末尾添加新子DIV #

要给某一行末尾加元素，首先得准确找到这一行的所有子元素，然后把新元素插入到该行最后一个元素的后面。这里我们可以通过元素的offsetTop属性来判断同一行的元素（同一行的元素顶部垂直位置是相同的，只要布局没有特殊的垂直间距）：

// 定义工具函数：获取指定子元素所在行的所有兄弟元素
function getRowElements(childElement) {
  const parentContainer = childElement.parentElement;
  const targetTop = childElement.offsetTop;
  // 筛选出和当前元素offsetTop一致的所有子元素，就是同一行的
  return Array.from(parentContainer.children).filter(el => el.offsetTop === targetTop);
}

// 示例：给第一行末尾添加新子DIV
const parent = document.querySelector('.parent');
const firstRowFirstChild = parent.firstElementChild;
const firstRowElements = getRowElements(firstRowFirstChild);

// 创建新子DIV
const newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = '新子元素'; // 可自定义内容

// 插入到第一行末尾
parent.insertBefore(newChild, firstRowElements[firstRowElements.length - 1].nextSibling);

需求2：点击子DIV时，在其所在行末尾添加新子DIV #

这里要解决两个核心问题：一是正确绑定每个子DIV的点击事件（避免var的作用域问题），二是准确找到点击元素所在的行。修正后的代码如下：

const parent = document.querySelector('.parent');
const allChildDivs = document.querySelectorAll('.child');

// 复用上面的工具函数
function getRowElements(childElement) {
  const parentContainer = childElement.parentElement;
  const targetTop = childElement.offsetTop;
  return Array.from(parentContainer.children).filter(el => el.offsetTop === targetTop);
}

// 给每个子DIV绑定点击事件，用forEach避免var的作用域陷阱
allChildDivs.forEach(child => {
  child.addEventListener('click', function() {
    // 获取当前点击元素所在行的所有元素
    const currentRowElements = getRowElements(this);
    // 创建新子DIV
    const newChild = document.createElement('div');
    newChild.className = 'child';
    newChild.textContent = '新子元素';
    // 插入到当前行的末尾
    parent.insertBefore(newChild, currentRowElements[currentRowElements.length - 1].nextSibling);
  });
});

关键细节说明 #

• 用offsetTop判断行：这个方法适用于大多数布局（浮动、inline-block、flex等），只要同一行的元素顶部位置一致就能生效；如果是特殊布局，你可以根据实际情况调整判断逻辑（比如flex布局可以通过父容器的getBoundingClientRect配合子元素的位置判断）。
• 用forEach绑定事件：避免了var循环中所有事件回调共享同一个变量的问题，每个回调里的this都准确指向被点击的子DIV。
• 插入位置的准确性：通过insertBefore把新元素插到该行最后一个元素的下一个兄弟节点前，确保新元素刚好落在当前行的末尾。

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