如何将元素附加到特定的 div - Vanilla JS？ [已关闭]

Question

我是新来的 - 也是 JavaScript 新手，我正在创建这个待办事项列表 - 我一直在尝试只使用普通 JS。这个想法是，用户可以创建自己的任务类别，并且这些类别将在屏幕上排列为框 - 在 DOM 中动态创建具有相同名称的类的元素。这些类别还显示在输入旁边的选择菜单中。 我的困难是如何在每个任务的特定框中添加这些任务 - 例如：“锻炼”框中的“训练 Sesh”，针对正确的类别。

            <div class="activities" id="boxCards">
                <div id="box" class="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 id="box" class="Study">
                    <div class="catName">
                        <h3>Study</h3>
                    </div>
                </div>
            </div>

这是到目前为止的 JS 代码：

let boxTask = document.querySelector('#box');
const taskLibrary = [];

function adiciona(){
    let newDiv = document.createElement('div');
    newDiv.classList.add('taskAction');

    let para = document.createElement('p');
    para.classList.add('taskDesc');

    let lastTask = taskLibrary[taskLibrary.length - 1];
    para.appendChild(document.createTextNode(Object.values(lastTask)[1]));

    newDiv.appendChild(para);
    boxTask.appendChild(newDiv);
}

任何帮助将不胜感激...谢谢！！

Answer 1

您可以调用该函数以使用函数参数在类别中添加新任务，稍后可以使用该函数参数来定位您想要将新任务附加到的部分。

示例

   function AddTaskToSection(sectionIdentifier) {
   // create task 
   ...
   ...
   const targetSection = document.getElementById(sectionIdentifier);
   
   if (targetSection) {
    targetSection.appendChild(taskDiv);
   } else {
    console.error("Element with ID " + elementId + " not found.");
   }
 }