Javascript 为什么我在待办事项列表中得到重复的待办事项？

这是js代码

let form = document.getElementById('todoForm');
let input = document.getElementById('todoInput');
let btn = document.getElementById('btn');
let todos = [];


const loadTodos = () => {
  let parent = document.getElementById('todoList');
  todos.forEach(todo => {
    let newLi = document.createElement('li');
    newLi.innerHTML = `<li>${todo.text}</li>`
    parent.appendChild(newLi);
  })
}

btn.addEventListener('click', (e) => {
  e.preventDefault();
  let text = input.value;
  let todo = {
    id: todos.length + 1,
    text: text,
    complete: false,
  }
  todos.push(todo);
  loadTodos();
})


window.onload = () => {
  loadTodos();
}

let form=document.getElementById（'todoForm'）；
让输入=document.getElementById（'todoInput'）；
设btn=document.getElementById（'btn'）；
让todos=[]；
常量loadTodos=（）=>{
让parent=document.getElementById（'todoList'）；
todo.forEach（todo=>{
让newLi=document.createElement（'li'）；
newLi.innerHTML=`
${todo.text}
`
父母、子女（newLi）；
})
}
btn.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
让text=input.value；
让todo={
id:todos.length+1，
文本：文本，
完成：错误，
}
todo.push（todo）；
loadTodos（）；
})
window.onload=（）=>{
loadTodos（）；
}

当我第一次添加todo时，它是确定的，但是秒时间将再次打印第一个todo，包括秒时间

例如：

第一项任务 2.首先要做的事 3.第二次待办事项

---

您应该添加另一个函数来处理单个todo，下面是您的更新代码

let form = document.getElementById('todoForm');
let input = document.getElementById('todoInput');
let btn = document.getElementById('btn');
let todos = [];


const loadTodos = () => {
    let parent = document.getElementById('todoList');
    todos.forEach(todo => {
        let newLi = document.createElement('li');
        newLi.innerHTML = `<li>${todo.text}</li>`
        parent.appendChild(newLi);
    })
}

const renderNewToDo = (todo) => {
    let parent = document.getElementById('todoList');
    let newLi = document.createElement('li');
    newLi.innerHTML = `<li>${todo.text}</li>`
    parent.appendChild(newLi);
}

btn.addEventListener('click', (e) => {
    e.preventDefault();
    let text = input.value;
    let todo = {
        id: todos.length + 1,
        text: text,
        complete: false,
    }
    todos.push(todo);
    renderNewToDo(todo);
})


window.onload = () => {
    loadTodos();
}

let form=document.getElementById（'todoForm'）；
让输入=document.getElementById（'todoInput'）；
设btn=document.getElementById（'btn'）；
让todos=[]；
常量loadTodos=（）=>{
让parent=document.getElementById（'todoList'）；
todo.forEach（todo=>{
让newLi=document.createElement（'li'）；
newLi.innerHTML=`
${todo.text}
`
父母、子女（newLi）；
})
}
常量renderNewToDo=（todo）=>{
让parent=document.getElementById（'todoList'）；
让newLi=document.createElement（'li'）；
newLi.innerHTML=`
${todo.text}
`
父母、子女（newLi）；
}
btn.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
让text=input.value；
让todo={
id:todos.length+1，
文本：文本，
完成：错误，
}
todo.push（todo）；
renderNewToDo（todo）；
})
window.onload=（）=>{
loadTodos（）；
}

在添加列表之前，必须清空“todoList”元素；您的代码始终会添加整个列表。如果要重新创建列表中的每个项目，则需要在loadTodos之前清除现有的项目，或者只创建最后添加的项目。我该怎么做？有什么例子吗？