Javascript 为什么这个addEventListener不适用于我创建的li元素？

我尝试实现一个aotocomplete输入。我想当用户单击新添加的li元素时，输入值将是li元素的值。但是，此addEventListener似乎不适用于此函数。我可以知道为什么吗？我认为每个新的li元素在我添加事件侦听器之前都创建了它们

function displayMatches(matchesArr) {
  var newLi;
  for (let j of matchesArr) {
    newLi = document.createElement('li');
    newLi.innerHTML = `<li id="${j.replace(/\s/g,'')}">${j}</li>`;
    autoResults.innerHTML += newLi.innerHTML;
    document.getElementById(j.replace(/\s/g, '')).addEventListener("click",
      function(e) {
        alert("Hello World!");
      })
  }
}

---

要添加到DOM中的

li

与

newLi

不同。分配给

.innerHTML

时，您正在创建一个全新的元素。您还正在销毁和重新创建

autoResults

中的所有旧元素。当您分配给

.innerHTML

时，它从头开始解析HTML文本，创建所有新元素；在旧元素上设置的任何属性（如事件侦听器）都将丢失

添加元素本身，而不是指定给

.innerHTML

函数显示匹配项（matchesArr）{
var newLi；
对于（让j表示匹配）{
newLi=document.createElement（'li'）；
newLi.id=j.replace（/\s/g'）；
newLi.innerHTML=j；
newLi.addEventListener（“单击”，
职能（e）{
警报（“你好，世界！”）；
});
自动结果：appendChild（newLi）；
}
}

要添加到DOM中的

li

与

newLi

不同。分配给

.innerHTML

时，您正在创建一个全新的元素。您还正在销毁和重新创建

autoResults

中的所有旧元素。当您分配给

.innerHTML

时，它从头开始解析HTML文本，创建所有新元素；在旧元素上设置的任何属性（如事件侦听器）都将丢失

添加元素本身，而不是指定给

.innerHTML

函数显示匹配项（matchesArr）{
var newLi；
对于（让j表示匹配）{
newLi=document.createElement（'li'）；
newLi.id=j.replace（/\s/g'）；
newLi.innerHTML=j；
newLi.addEventListener（“单击”，
职能（e）{
警报（“你好，世界！”）；
});
自动结果：appendChild（newLi）；
}
}

你真的想把一个李放在另一个李里面吗？@Ying我删除了我的答案，因为它不正确。祝你好运你好否我想将li添加到已在html中的ul中

您真的想将li放入另一个li中吗？@Ying我已删除我的答案，因为它不正确。祝你好运你好不，我想将li添加到已经在html中的ul

非常感谢！它起作用了！所以问题是这行“autoResults.innerHTML+=newLi.innerHTML；”对吗？当我们为元素的innerHTML分配某些内容时，以前分配给该元素的所有内容都将丢失？是的，这正是我所写的。非常感谢！它起作用了！所以问题是这行“autoResults.innerHTML+=newLi.innerHTML；”对吗？当我们为元素的innerHTML分配某些内容时，以前分配给该元素的所有内容都将丢失？是的，这正是我写的。

newLi.addEventListener("click", 
    function(e) {
        alert("Hello World!");
    })