使用 querySelectorAll 为新创建的元素创建一个循环答案

【问题标题】：use querySelectorAll to create a loop for newly created elements使用 querySelectorAll 为新创建的元素创建一个循环
【发布时间】：2013-01-04 19:03:07
【问题描述】：

我想要做的是使用querySelectorAll() 函数创建一个循环，在该循环中我可以使用我创建的getInput() 函数创建的每个新<li/> 元素（效果很好） .我想用console.log() 来测试这个，所以当我点击每个<li/> 项目时，它会确认我已经在控制台中这样做了。这个querySelectorAll() 方法对我来说是新的，而且我在学习 Javascript 方面也是新手。因此，任何建议和解释都会非常有帮助。谢谢。

function getInput() {
    var liValue = theForm.elements.input.value;  
    var liNew = document.createElement("li");
    liNew.innerHTML += liValue;
    var list = document.getElementById("ulList");
    list.appendChild(liNew); 
    deleteLi;
 }

 function deleteLi() {
    var handlers = document.querySelectorAll("li");
    for (var i = 0; i < handlers.lenghth; i++) {
        handlers[i].onclick = console.log("you got me");
    }
 }

【问题讨论】：

您是否考虑过为此向新创建的节点添加一个 CSS 类？
我可能遗漏了一些明显的东西，但我不太明白您希望我们提供什么帮助。您当前的代码出了什么问题？
也许只是handlers.lenghth，应该是handlers.length？
感谢您指出拼写错误。我正在尝试使用 queryselectorall 来捕获我正在制作的所有 li 元素。然后我想使用一个循环，我可以用它来单独指向每个 li。我试图使用console.log指向每一个来测试我是否能够做到这一点，因为在我知道我实际上是针对每一个之后，我想稍后添加当我点击时删除每一个的能力他们每个人都是具体的。

标签： javascript loops indexing selectors-api

【解决方案1】：

只需在创建元素时添加点击处理程序。运行您发布的 qSA，并选择所有 li 元素，即使是您已经创建的元素。

function getInput() {
    var liValue = theForm.elements.input.value;  
    var liNew = document.createElement("li");
    liNew.onclick = function() { console.log("clicked!"); };
    liNew.innerHTML += liValue;
    var list = document.getElementById("ulList");
    list.appendChild(liNew); 
}

【讨论】：