insertAdjacentHTML is not a function

Question

So Im working with electron and in my file "ipcRendererEvent.js" I wrote the following code:

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)
  }
}

And this is the error:

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 returns a NodeList. You could use querySelector instead to get the first matching element in the document or you can call insertAdjacentHtml on an individual element in the list (e.g.: imagesList[0].insertAdjacentHTML).

Answer 2

The correct notation is insertAdjacentHTML. You have a small typo :)