将 id 设置为新创建的元素

Question

这是我的第一个问题，我很高兴成为这个社区的一员。

就像我在标题中所说的那样。 我想将 ID 设置为新创建的元素。 我不知道我做错了什么。

这是我的代码示例：

function DataBack(response) {
var ci_output = document.getElementById('ci_output');
data = JSON.parse(response);
for (i = 0; i < data.result.length; i++) {
    var li = document.createElement("p");
    li.setAttribute("id",'cmdbitem' + i);
    li.setAttribute('onclick', 'displayDetails(data.result[' + i + '])');
    document.getElementById('cmdbitem' + i).onclick = changeColor; //this function is throwing error "Uncaught TypeError: document.getElementById(...) is null"
    li.innerHTML = data.result[i].name;
    ci_output.appendChild(li);
    }
 }

我想要实现的是更改用户单击的新创建项目的颜色。 为此，我需要身份证。 我进行了测试并设置了 ID，因为例如这个特定元素的行为就像它应该的那样

#cmdbitem2 {
cursor : pointer;

}

为什么这个 document.getElementById('cmdbitem' + i).onclick = changeColor; 抛出错误？

预先感谢。

Answer 1

因为新元素li尚未插入到文档中（发生在ci_output.appendChild(li); ）。

但是你可以在这里简单地使用li ，不需要通过getElementById来获取它

---

这是您的代码中的完整示例。

for (let i = 0; i < data.result.length; i++) {
   let li = document.createElement("p")
   li.id = 'cmdbitem' + i
   li.addEventListener('click', ()=>displayDetails(data.result[i]))
   li.addEventListener('click', changeColor)
   li.innerHTML = data.result[i].name
   ci_output.appendChild(li)
}

---

一些参考：

• 箭头 function （也可以使用普通功能）
• let (总是使用let而不是var )

Answer 2

您的 function 抛出错误，因为它找不到您的元素。

因此，让 go 通过您的代码：

• 你创建一个元素

• 您在文档中搜索您的元素

• 您将元素添加到文档中

请注意在将元素添加到文档之前如何在文档中搜索元素？

document.getElementById搜索您的文档而不是所有元素。 希望这会有所帮助：：D

编辑：您也可以只做li.onclick ，这将是最好的解决方案。