insertAdjacentHTML 不是函数

Posted 2023-03-22

【中文标题】insertAdjacentHTML 不是函数

【英文标题】：insertAdjacentHTML is not a function

【发布时间】：2019-06-15 10:03:25

【问题描述】：

所以我使用电子并在我的文件“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" >
                    <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)

【问题讨论】：

insertAdjacentHTML() 如果我没记错的话，必须在 single 元素上调用。您正试图在整个列表中调用它。

提供images的例子

【参考方案1】：

querySelectorAll 返回一个NodeList。您可以使用querySelector 来获取文档中的第一个匹配元素，或者您可以在列表中的单个元素上调用insertAdjacentHtml（例如：imagesList[0].insertAdjacentHTML）。

【参考方案2】：

正确的符号是insertAdjacentHTML。你有一个小错字:)