使用forEach()遍历数组时innerHTML赋值显示undefined问题求助

问题原因 #

document.querySelectorAll() 返回的是包含所有匹配元素的 NodeList 集合，不是单个DOM节点，该集合本身没有 innerHTML 属性，直接访问该属性会得到 undefined，因此页面无法正常渲染内容。

解决方案 #

场景1：仅需要给单个 .contacts 元素追加内容

使用 document.querySelector() 直接获取单个匹配元素即可，同时建议先拼接所有待插入的HTML字符串再一次性赋值，减少DOM操作次数提升性能：

const phoneNos = () => {
  const contactsEle = document.querySelector('.contacts');
  let insertHtml = '';
  dBase.name.phones.forEach(phone => {
    insertHtml += '<span class="pnumber">' + phone + '</span>';
    console.log(phone);
  })
  contactsEle.innerHTML += insertHtml;
}

场景2：需要给所有匹配到的 .contacts 元素都追加内容

遍历 querySelectorAll 返回的NodeList，给每个元素单独追加内容：

const phoneNos = () => {
  const contactsEles = document.querySelectorAll('.contacts');
  let insertHtml = '';
  dBase.name.phones.forEach(phone => {
    insertHtml += '<span class="pnumber">' + phone + '</span>';
    console.log(phone);
  })
  contactsEles.forEach(ele => ele.innerHTML += insertHtml);
}

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