Javascript 附加图像仅显示为字符串

我试图在一个div中附加几个图像

var mylegends = document.getElementById('mylegends');
    for(let i=0; i<=images.length; i++){
        let img = images[i].currentSrc;
        mylegends.append(`<img src=${img}></img>`)
}

var mylegends=document.getElementById（'mylegends'）；
for（设i=0；i错误的命令和语法。这不需要jQuery

var mylegends = document.getElementById('mylegends');
for(let i=0; i<=images.length; i++){
  
  /* bad idea to use this method */
  // let img = images[i].currentSrc;
  // mylegends.innerHTML += (`<img src="${img}"/>`)

  /* preferable method */
  let image = document.createElement("img");
  image.src = images[i].currentSrc
  mylegends.appendChild(image);
}

var mylegends=document.getElementById（'mylegends'）；
for（设i=0；i
mylegends
是DOM元素，而不是jQuery对象

两者都有名为
append（）
的方法，但它们的工作方式不同

有关附加如何在DOM元素上工作的信息，请参见

方法的作用是：在ParentNode.append（）的最后一个子节点之后插入一组节点对象或DOMString对象。DOMString对象作为等效文本节点插入

如果要向DOM元素插入HTML字符串，则需要：

mylegends.insertAdjacentHTML（'beforeend'，``）

旁白：禁止使用
元素的结束标记，因此不要包含该标记。
当JavaScript方法或函数不能按预期工作时，理解原因的最简单方法是查看MDN文档，这里说：

ParentNode.append（）
方法将在
ParentNode
DOMString
对象的最后一个子对象作为等效文本节点插入后，插入一组节点对象或
DOMString
对象

因此，很容易理解为什么要将HTML字符串而不是DOM节点附加到内容中

例如：


let图像=[{
当前SRC:“https://via.placeholder.com/150/f90/fff"
}],
mylegends=document.getElementById（'mylegends'）；
for（设i=0；i

…innerHTML+=
通常不是一个好主意。这是一个相当昂贵的操作，因为它必须将元素的整个内容序列化为HTML，然后将字符串转换回另一组元素…其副作用是执行诸如销毁事件处理程序和重置表单控件值之类的操作。Oh、 我没有意识到这一点。谢谢。编辑我的答案以使用
.appendChild
。
for(let i=0; i<=images.length; i++){
  let img = images[i].currentSrc;
  $('#mylegends').append(`<img src="${img}"/>`)
}

mylegends.insertAdjacentHTML('beforeend', `<img src="${img}">`)