javascript - insertAdjacentHTML 不是函数

Question

所以我使用 electron 并在我的文件“ipcRendererEvent.js”中编写了以下代码:

function loadImages (images) {
  const imagesList = document.querySelectorAll('ul.list-group')

  for (let i = 0, length1 = images.length; i < length1; i++) {
    const node = `<li class="list-group-item">
                    <img class="media-object pull-left" src="${images[i].src}" height="32">
                    <div class="media-body">
                      <strong>${images[i].filename}</strong>
                      <p>${images[i].size}</p>
                    </div>
                  </li>`
    imagesList.insertAdjacentHTML('beforeend', node)
  }
}

这是错误:

Uncaught TypeError: imagesList.insertAdjacentHTML is not a function
    at loadImages (ipcRendererEvents.js:22)
    at EventEmitter._electron.ipcRenderer.on (ipcRendererEvents.js:58)
    at EventEmitter.emit (events.js:182)

Answer 1

querySelectorAll返回 NodeList .你可以使用 querySelector而不是获取文档中的第一个匹配元素，或者您可以调用 insertAdjacentHtml在列表中的单个元素上(例如:imagesList[0].insertAdjacentHTML)。