javascript - 有没有更简单的方法在 JS 中应用实时选择？

Question

const btnList = [
    {
        id: 'all',
        content: 'All'
    },
    {
        id: 'br',
        content: 'Breakfast'
    },
    {
        id: 'dn',
        content: 'Dinner'
    }
];
window.addEventListener('load', () => {
    const btnz = document.getElementById('btnz');
    let newBtn = '';
    btnList.forEach(btn => {
      newBtn += `<button id="${btn.id}" class="btn-item">${btn.content}</button>`
    })
    btnz.innerHTML = newBtn;
});
const btnCollection = document.getElementsByClassName("btn-item");
console.log(btnCollection.length);

这是 HTML：

<div id="btnz"></div>

我想创建动态按钮，然后使用 forEach() 函数查看新创建的按钮。它给了我一个错误，所以我尝试了 log btnCollection.length，但由于某种原因它返回了“0”而不是“3”。为什么？

标签： javascripthtml