未捕获的类型错误：btnz.appendChild 不是函数

如何解决未捕获的类型错误：btnz.appendChild 不是函数

const btnList = [
    {
        id: 'all',content: 'All'
    },{
        id: 'br',content: 'breakfast'
    },{
        id: 'dn',content: 'dinner'
    }
]
const btnz = document.querySelector('.btnz');

 // for version 1 I declared newBtn beforehand: let newBtn = ''
 btnList.forEach(btn => {
        // version 1: 
        newBtn += `<button id="${btn.id}">${btn.content}</button>`
        // version 2:
        let newBtn = document.createElement('button');
        newBtn.setAttribute('id',btn.id);
        newBtn.textContent = btn.content;
        btnz.appendChild(newBtn);
    })

这是我的 JS，我只有一个带有类 btnz 的简单 div，我想在其中添加新的动态按钮。你能解释一下是什么问题吗？为什么没有一个版本不起作用。

解决方法

Document.querySelectorAll() 返回静态（非实时）NodeList。你应该使用索引。

如果您有类 IDLE 的单个元素，那么我建议您使用 Document.querySelector()，它返回文档中的 first 元素匹配指定的选择器或选择器组。如果未找到匹配项，则返回 null。

btnz

,

在版本 1 中，您将获得 newBtn 作为字符串，因此您需要执行 innerHTML 在 DOM 中添加。

const btnList = [{
    id: 'all',content: 'All'
  },{
    id: 'br',content: 'breakfast'
  },{
    id: 'dn',content: 'dinner'
  }
];

let newBtn = '';
const btnz = document.querySelector("div.btnz");
btnList.forEach(btn => {
  // version 1: 
  newBtn += `<button id="${btn.id}">${btn.content}</button>`
})
btnz.innerHTML = newBtn;

<div class="btnz"></div>

对于版本 2，您需要在 appendChild 上NodeElement

const btnList = [{
    id: 'all',content: 'dinner'
  }
]

let newBtn = '';
const btnz = document.querySelector("div.btnz");
btnList.forEach(btn => {
  // version 2:
  let newBtn = document.createElement('button');
  newBtn.setAttribute('id',btn.id);
  newBtn.textContent = btn.content;
  btnz.appendChild(newBtn);
})

<div class="btnz"></div>