javascript - 为什么我的阵列中的内容副本会发布？

Question

当我单击按钮将文本添加到我的页面时，我希望我的输入值呈现在我的页面上。出于某种原因，对于我拥有的当前代码，除了已经存在的内容的副本之外，还会显示来自我的输入的新值，因此基本上以前的输入值在前端显示不止一次，而不是新项目刚刚被添加到列表中

这是codepen的链接，所以你可以看到会发生什么https://codepen.io/matthew-angel/pen/jOmJLBW

// Log out "Button clicked!" when the user clicks the "SAVE INPUT" button
let myLeads = []
const button = document.querySelector("#input-btn")
const inputEl = document.querySelector("#input-el")
// let inputText = inputEl.value
const ulEl = document.querySelector("#ul-el")


button.addEventListener("click", addText)

function addText() {
console.log(inputEl.value)
myLeads.push(inputEl.value)
console.log(myLeads)
render()
}


function render(){
 
    for(let i = 0; i < myLeads.length; i++) {
         //   create element
        // set text content
        // append to ul
      let li =  document.createElement('li')
        li.innerText += myLeads[i]
        ulEl.appendChild(li)
       console.log(li)
       console.log(ulEl)
       console.log( li.textContent)  
    }
   
}

标签： javascripthtmlarraysfunctiondom-events