在可點擊的 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);
        });
    })
}

編輯：如評論中所述，事件默認冒泡，您可以在此處了解更多信息