如何实现点击对应按钮仅在指定HTML Section中动态添加任务？

问题说明 #

输入任务名称后点击“Add”按钮，需为对应Section内的指定Div动态添加包含checkbox和label的任务。当前代码点击任意按钮会在所有Section中添加任务，需实现点击某Section的按钮仅操作该Section内的元素。

当前HTML代码 #

<section id="1" class="1">
    <div id="div1" class="add-input-label">
        <input type="checkbox" name="checkbox-1" id="checkbox-1">
        <label for="checkbox-1">Test</label>
    </div>
    <div id="btn-div-1" class="btn-div-1">
        <input type="text" id="input-text-1">
        <button id="btn-1" class="btn-add">Add</button>
    </div>
</section>
<section id="2" class="2">
    <div id="div2" class="add-input-label">
        <input type="checkbox" name="checkbox-2" id="checkbox-2">
        <label for="checkbox-2">Test</label>
    </div>
    <div id="btn-div-2" class="btn-div-2">
        <input type="text" id="input-text-2">
        <button id="btn-2" class="btn-add">Add</button>
    </div>
</section>

当前JavaScript代码（存在问题） #

const btn = document.querySelectorAll('.btn-add');
const div = document.querySelectorAll('.add-input-label');

btn.forEach((btn) => {
btn.addEventListener('click', () => {
    div.forEach((div) => {
        let label = document.createElement('label');
        let input = document.createElement('input');
        div.appendChild(input);
        div.appendChild(label);
        label.innerText = 'hey';
        input.type = 'checkbox';
    });
});
});

解决方案 #

问题根源是点击按钮后遍历了所有.add-input-label元素，导致每个Section都被添加内容。修正后通过定位当前按钮所属的Section，仅操作该Section内的目标元素：

修正后的JavaScript代码 #

const btns = document.querySelectorAll('.btn-add');

btns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 定位当前按钮所在的Section
    const currentSection = btn.closest('section');
    // 获取当前Section内的目标Div和输入框
    const targetDiv = currentSection.querySelector('.add-input-label');
    const taskInput = currentSection.querySelector('input[type="text"]');
    const taskText = taskInput.value.trim() || '未命名任务';

    // 创建唯一ID用于关联checkbox和label
    const uniqueId = `checkbox-${Date.now()}`;

    // 创建checkbox元素
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = uniqueId;

    // 创建label元素并关联checkbox
    const label = document.createElement('label');
    label.setAttribute('for', uniqueId);
    label.textContent = taskText;

    // 将元素添加到目标Div
    targetDiv.appendChild(checkbox);
    targetDiv.appendChild(label);
    targetDiv.appendChild(document.createElement('br')); // 换行优化布局

    // 清空输入框
    taskInput.value = '';
  });
});

核心改进点 #

• 范围限定：通过closest('section')精准定位当前按钮所属的父级Section，确保后续操作仅在该Section内进行
• 元素关联：为每个新创建的checkbox设置唯一ID，与label的for属性绑定，保证label和checkbox的联动功能正常
• 用户体验：读取输入框的实际内容作为任务名称，默认值替换为更友好的文本，添加后自动清空输入框
• 布局优化：添加换行元素，避免新任务挤在一起

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