如何通过单击 HTML 按钮向 div 添加多个元素

Question

我一直在开发一个 ToDo 应用程序，我已经设法通过单击一个按钮来创建任务，问题是我希望它在单击

createButton

时继续创建任务，但它只执行一次。我怎么才能继续创建任务

//inputs
let ids1 = document.getElementById('ids')
let ids2 = document.getElementById('ids2')
let ids3 = document.getElementById('ids3')
let ids4 = document.getElementById('ids4')

//create paragraph
let paro = document.createElement('p')

let createButton = document.getElementsByClassName('create')
let newd = document.getElementsByClassName('newd')

function createTask (){ 

paro.innerText = ids1.value + ' ' + ids2.value + ' ' + ids3.value + ' ' + ids4.value

if(ids1.value !== ''){ 
    if(ids2.value !== ''){ 
        if(ids3.value !== ''){ 
            newd[0].appendChild(paro)
        }else {
            alert('date is required')
        }

    }else {
        alert('description description is required')
    }
}else {
     alert('title is required')
}
}


 createButton[0].addEventListener('click', createTask)

Answer 1

在

<p>

事件处理程序中创建

createTask

元素，这样您每次都创建一个新元素，而不是附加相同的元素。

演示：

let ids1 = document.getElementById('ids')
let ids2 = document.getElementById('ids2')
let createButton = document.querySelector('.create');
let newd = document.querySelector('.newd');

function createTask() {
  let paro = document.createElement('p');
  paro.innerText = ids1.value + ' ' + ids2.value;
  newd.appendChild(paro);
}
createButton.addEventListener('click', createTask);

<input id="ids"> <input id="ids2">
<button class="create">Create</button>
<div class="newd"></div>