如何获取JavaScript动态创建的class为tick的按钮元素

• 你调用document.getElementsByClassName("tick")的代码在脚本初始化阶段就同步执行了，此时尚未触发添加按钮的点击事件，.tick类元素还没有被插入到DOM树中，因此只能获取到空的元素集合。
• 额外逻辑缺陷：你现有代码中的for循环每次都会覆盖sample变量，最终插入DOM的只会是最后一条数据对应的元素，不会生成和savedIn数组长度匹配的多组元素。

方法1：动态元素插入完成后再获取 #

将获取.tick元素的逻辑放到DOM插入操作之后即可，修改后的代码如下：

var inputEl=document.querySelector("#input-bar");
var addBtnEl=document.querySelector("#btn");
var ulEl=document.querySelector("#output-line");
let savedIn=[];
addBtnEl.addEventListener("click",function(){
    savedIn.push(inputEl.value);
    // 修复原for循环覆盖sample的问题，先拼接所有元素字符串再插入
    let sample = '';
    for(let i=0;i<savedIn.length;i++){
        sample += `<li class="list">${savedIn[i]}</li><button class="tick"><span id="tick-span">&#10003;</span></button><br>`;
    }
    ulEl.innerHTML += sample;
    // 插入完成后再获取元素，此时就能拿到所有.tick按钮
    var tickbtn=document.getElementsByClassName("tick"); 
    console.log(tickbtn);
});

方法2：事件委托（推荐用于给动态按钮绑定交互） #

如果需要给.tick按钮绑定点击事件，无需每次生成新元素后重复获取绑定，直接给父元素绑定事件即可，性能更高，适配所有后续新增的动态元素：

// 给父元素绑定事件，所有子元素的点击都会冒泡到父元素
ulEl.addEventListener('click', function(e) {
    // 判断点击源是否属于.tick按钮
    const targetTick = e.target.closest('.tick');
    if (targetTick) {
        // 此处写tick按钮的点击逻辑
        console.log('触发tick按钮点击', targetTick);
    }
})

方法3：生成元素时直接保存引用 #

如果需要频繁操作这些动态按钮，可以在创建元素时就把引用存到数组中，无需每次从DOM查询：

var inputEl=document.querySelector("#input-bar");
var addBtnEl=document.querySelector("#btn");
var ulEl=document.querySelector("#output-line");
let savedIn=[];
// 定义数组保存tick按钮引用
let tickBtnList = [];
addBtnEl.addEventListener("click",function(){
    savedIn.push(inputEl.value);
    // 清空现有内容避免重复渲染
    ulEl.innerHTML = '';
    tickBtnList = [];
    for(let i=0;i<savedIn.length;i++){
        // 逐个创建DOM元素
        const li = document.createElement('li');
        li.className = 'list';
        li.textContent = savedIn[i];
        const tickBtn = document.createElement('button');
        tickBtn.className = 'tick';
        tickBtn.innerHTML = '<span id="tick-span">&#10003;</span>';
        const br = document.createElement('br');
        ulEl.append(li, tickBtn, br);
        // 保存按钮引用
        tickBtnList.push(tickBtn);
    }
    console.log(tickBtnList);
});

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