如何将div追加到另一个div？PHP多循环下添加按钮批量追加问题

这个问题我碰到过不少次，核心问题就是你的事件逻辑没有区分每个独立的.appendOuter容器，导致点击任意按钮时，新div会被追加到所有容器里。咱们一步步来修复：

核心思路 #

给每个添加按钮绑定事件时，只操作当前按钮所属的父容器，而不是全局选择所有.appendOuter元素。我们可以利用DOM的相对关系（比如closest()方法）来定位到当前按钮对应的容器。

具体实现步骤 #

1. 调整PHP循环的按钮代码 #

不用给每个按钮设置唯一ID，只需要统一类名，还可以通过data-*属性携带当前项的ID（方便后续关联业务逻辑）：

<div class="appendOuter">
    <?php foreach($query as $data){ 
        $id = $data['ID'];
        $initialAccess = $data['Access'];
        
        // 渲染初始内容（你的原有代码）
        if(strlen($initialAccess) > 3){
            echo '<div class="access-item">' . htmlspecialchars($initialAccess) . '</div>';
        }
        
        // 添加按钮：统一类名 + 携带当前项ID
        echo '<button class="add-btn" data-item-id="' . $id . '">添加新项</button>';
    } ?>
</div>

2. 编写正确的JavaScript逻辑 #

推荐用事件委托（尤其是动态生成按钮的场景），确保点击按钮时精准定位到对应容器：

原生JS版本

// 给文档绑定点击事件，委托给.add-btn类的元素
document.addEventListener('click', function(e) {
    // 判断点击的元素是添加按钮
    if (e.target.classList.contains('add-btn')) {
        // 找到当前按钮所属的.appendOuter容器
        const targetContainer = e.target.closest('.appendOuter');
        
        // 创建新的div元素
        const newDiv = document.createElement('div');
        newDiv.className = 'access-item';
        // 可以利用按钮的data属性关联当前项，比如：
        newDiv.textContent = `新添加的内容（关联ID：${e.target.dataset.itemId}）`;
        
        // 仅追加到当前容器内
        targetContainer.appendChild(newDiv);
    }
});

jQuery版本（如果项目使用jQuery）

// 事件委托到.add-btn
$(document).on('click', '.add-btn', function() {
    // 找到当前按钮对应的父容器
    const $targetContainer = $(this).closest('.appendOuter');
    // 追加新div，同样可以用data属性关联业务数据
    $targetContainer.append(`<div class="access-item">新添加的内容（关联ID：${$(this).data('item-id')}）</div>`);
});

为什么之前的代码会出错？ #

大概率是你的原有JS代码全局选择了所有.appendOuter容器，比如这样的错误写法：

// 错误示例：点击任意按钮，所有容器都会追加div
$('.add-btn').click(function() {
    $('.appendOuter').append('<div>新内容</div>');
});

这种写法会选中页面上所有的.appendOuter元素，自然会导致每个容器都被追加新div。

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