Javascript 我怎样才能让完成的待办事项不消失

我正在try 创建一个待办事项列表，不知道该如何做才能避免每次添加新任务时完成的待办事项都消失.我知道会发生这种情况，因为每次添加新任务时我都会清除div，但是我不确定如何继续，以便继续使用数组，并且仍然显示已完成的任务和新任务.

科德芬:https://codepen.io/martinkariuki7-the-looper/pen/OJvQXRW人

const newToDo = document.getElementById('todo-new')
const addBtn = document.getElementById('addToDo')
const main= document.getElementById('toDoList')
const taskDone = document.getElementsByClassName('task')

let toDoList = []

// populate to do list
function populateToDo(){
  let todo = newToDo.value
  todo !== null && todo !== '' ? toDoList.push(todo) : alert('You must write something')

  updateDOM()
}

//Update DOM
function updateDOM(){
    // Clear main div
    main.innerHTML = `<h1>To do list </h1>`

    // Show tasks on the front
    toDoList.forEach(item =>{
        let task = document.createElement('div')
        task.classList.add('task')
        task.innerHTML = `<label><input type="checkbox" >${item}</label><br>`
        main.append(task)
   
        task.addEventListener('change', () => task.classList.toggle('task-complete'))

        newToDo.value = ''
    })

}

// Event listeners
// Add Tasks
addBtn.addEventListener('click', populateToDo)
newToDo.addEventListener('keydown', (e) => {
    if(e.code === 'Enter'){
       e.preventDefault()
       populateToDo()
    }
})