通过document.createElement创建的span元素无法获取并添加事件监听怎么办

问题原因 #

你获取不到span元素的核心原因是API用错了，和动态生成元素没有关系：
document.getElementsByName("span") 的作用是查找所有name属性值为span的元素，你动态创建的span没有设置过name属性，自然返回空列表。如果要按标签名查找span元素，应该用document.getElementsByTagName("span") 或者 document.querySelectorAll("span")。

解决方案 #

这里提供三种常用方案，按需选择即可：

方案1：创建元素时直接绑定（最推荐，性能最高）

直接在生成span的newElement函数里绑定事件，不需要后续额外查找元素，逻辑最简洁：

function newElement(value){
    let div = document.createElement("div");
    let p = document.createElement("p");
    let span = document.createElement("span");
    
    p.innerText = value;
    
    let i = document.createElement("i");
    i.classList.add("fas", "fa-times");
    span.appendChild(i);

    // 直接给当前生成的span绑定点击事件
    span.addEventListener('click', () => {
        // 这里写你的业务逻辑，示例为删除当前列表项
        div.remove();
    })
    
    div.classList.add("checklist-item");
    div.appendChild(p);
    div.appendChild(span);
    
    return div;
}

方案2：事件委托（适合后续需要新增列表项的场景）

直接给父容器#checklist绑定事件，利用事件冒泡原理，不管是现有还是后续新增的span元素的点击事件都能被捕获，不需要重复绑定：

checklist.addEventListener('click', (e) => {
    // 判断点击的目标是否是span内的元素
    if(e.target.closest('span')) {
        // 业务逻辑示例：删除当前点击的列表项
        e.target.closest('.checklist-item').remove();
    }
})

方案3：先批量获取span再绑定

如果一定要先获取所有span元素再统一绑定，把原来的获取方法替换即可：

// 精准获取checklist下的所有span，避免匹配到页面其他位置的span
const iconList = document.querySelectorAll("#checklist span");
// 遍历绑定事件
iconList.forEach(span => {
    span.addEventListener('click', () => {
        // 你的业务逻辑
    })
})

内容的提问来源于stack exchange，提问作者Rishikrishna