如何使用JavaScript包装动态创建的图像元素

Question

我想在文件输入的更改事件中显示图像预览。因此，我正在使用JavaScript创建Image元素，并且希望将其包装在div中以显示关闭按钮。为此，我编写了以下代码：

preview(event, imageList) {
    let imgLen = event.target.files.length;
    if (imgLen > 0) {
        for (let i = 0; i < imgLen; i++) {
            let myImage = new Image(100, 100);
            myImage.src = URL.createObjectURL(event.target.files[i]);
            myImage.setAttribute('style', 'margin: 5px');
            imageList.appendChild("<div>" + myImage + "</div>");
        }
    }
} 

但是我在运行时抛出错误。 错误

Answer 1

使用此：

var divNode = document.createElement('DIV');
divNode.appendChild(myImage);
imageList.appendChild(divNode);

Answer 2

preview(event, imageList) {
    let imgLen =event.target.files.length;
    if(imgLen > 0) {
      for (let i = 0; i< imgLen; i++) {
        let myImage = new Image(100, 100);
        myImage.src = URL.createObjectURL(event.target.files[i]);
        let div = document.createElement('div');
        div.appendChild(myImage);
        myImage.setAttribute('style', 'margin: 5px'); 
        imageList.append( myImage);    
      }  
    }