如何用Vanilla JS将元素添加到指定div？待办清单开发问题

问题核心 #

你当前代码的两个关键问题：

1. HTML中使用了重复的id="box"——ID在文档中必须唯一，document.querySelector('#box')只会返回第一个匹配的元素，导致所有任务都加到第一个盒子里。
2. 没有根据用户选择的分类定位目标盒子的逻辑。

步骤1：修复HTML结构 #

先把重复的id="box"改为class="box"，保留分类名作为额外类名：

<div class="activities" id="boxCards">
    <div class="box Workout">
        <div class="catName">
            <h3>Workout</h3>
        </div>
        <div class="taskAction">
            <p class="taskDesc">Training sesh at 4pm - </p>
            <img src="calendar_month_FILL0_wght400_GRAD0_opsz24.svg" alt="calendar">
            <span class="taskDate">Today</span>
            <div class="action-btn">
                <img class="completed" src="done_FILL0_wght400_GRAD0_opsz24.svg" alt="done" title="Completed">
                <img class="deleted" src="delete_FILL0_wght400_GRAD0_opsz24.svg" alt="delete" title="Delete">
            </div>
        </div>
    </div>
    <div class="box Study">
        <div class="catName">
            <h3>Study</h3>
        </div>
    </div>
</div>

<!-- 假设你的分类选择菜单结构如下 -->
<select id="categorySelect">
    <option value="Workout">Workout</option>
    <option value="Study">Study</option>
    <!-- 动态添加的分类会自动插入这里 -->
</select>
<button onclick="adiciona()">添加任务</button>

步骤2：修改JavaScript逻辑 #

更新adiciona函数，实现「获取选中分类→定位目标盒子→添加任务」的完整流程：

const taskLibrary = [];

function adiciona() {
    // 1. 获取用户选中的分类
    const categorySelect = document.getElementById('categorySelect');
    const selectedCategory = categorySelect.value;
    if (!selectedCategory) return; // 未选择分类时终止执行

    // 2. 精准定位对应分类的盒子
    const targetBox = document.querySelector(`.box.${selectedCategory}`);
    if (!targetBox) {
        console.error(`找不到分类为 ${selectedCategory} 的盒子`);
        return;
    }

    // 3. 创建完整的任务元素（和现有任务结构对齐）
    const taskDiv = document.createElement('div');
    taskDiv.classList.add('taskAction');

    const taskDesc = document.createElement('p');
    taskDesc.classList.add('taskDesc');
    // 从任务库取最后一条任务的描述（假设你的taskLibrary结构包含task字段）
    const lastTask = taskLibrary[taskLibrary.length - 1];
    taskDesc.textContent = lastTask ? lastTask.task : '新任务';

    // 补充日历图标、日期、操作按钮
    const calendarImg = document.createElement('img');
    calendarImg.src = 'calendar_month_FILL0_wght400_GRAD0_opsz24.svg';
    calendarImg.alt = 'calendar';

    const taskDate = document.createElement('span');
    taskDate.classList.add('taskDate');
    taskDate.textContent = 'Today';

    const actionBtnWrap = document.createElement('div');
    actionBtnWrap.classList.add('action-btn');

    const completedBtn = document.createElement('img');
    completedBtn.classList.add('completed');
    completedBtn.src = 'done_FILL0_wght400_GRAD0_opsz24.svg';
    completedBtn.alt = 'done';
    completedBtn.title = 'Completed';

    const deleteBtn = document.createElement('img');
    deleteBtn.classList.add('deleted');
    deleteBtn.src = 'delete_FILL0_wght400_GRAD0_opsz24.svg';
    deleteBtn.alt = 'delete';
    deleteBtn.title = 'Delete';

    // 组装任务元素
    actionBtnWrap.appendChild(completedBtn);
    actionBtnWrap.appendChild(deleteBtn);
    taskDiv.appendChild(taskDesc);
    taskDiv.appendChild(calendarImg);
    taskDiv.appendChild(taskDate);
    taskDiv.appendChild(actionBtnWrap);

    // 4. 将任务添加到目标分类盒子中
    targetBox.appendChild(taskDiv);
}

关键说明 #

• 精准选择器：document.querySelector(.box.${selectedCategory})会匹配同时拥有.box类和对应分类类名的元素，确保找到正确的盒子。
• ID唯一性：永远不要在HTML中使用重复ID，这会导致DOM选择逻辑出错。
• 结构一致性：新创建的任务元素和现有任务结构完全对齐，保证页面样式统一。

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