在可点击的 div 中创建按钮

Question

我有可点击的 div，由元素上的 addEventListener 制作：

function expandTask() {
    const allTasks = document.querySelectorAll('.task-item');

    allTasks.forEach((task) => {
        task.addEventListener("click", () => {
                if(!task.classList.contains('active')){
                    task.classList.add('active');
                } else {
                    task.classList.remove('active')
                }
            })
    })
}

我想在这个可点击的 div 中放置一些按钮，我怎样才能让它工作？

当我点击按钮时，它仍然认为这是点击父 div。

Answer 1

您可以使用document.createElement(tagName)动态地创建元素，然后使用element.appendChild(element)将它们插入到文档中。

奖励：如果适合您的需要，您可以使用classList.toggle(className) 。

function expandTask() {
    const allTasks = document.querySelectorAll('.task-item');

    allTasks.forEach((task) => {
        task.addEventListener("click", () => {
            task.classList.toggle('active');

            let newDiv = document.createElement("DIV");
            newDiv.innerHTML = "Some text you want to add";
            task.appendChild(newDiv);
        });
    })
}

编辑：如评论中所述，事件默认冒泡，您可以在此处了解更多信息