Javascript - 如何创建元素，将其添加到数组中并显示它

Question

我正在尝试创建一个网络应用程序，它允许用户从他们的电脑上传图像，然后它将创建一个对象，并将其添加到一个数组中(以记录它及其属性)并将其显示在屏幕上。

我创建了一个codepen:https://codepen.io/eve_mf/pen/XebVWv

html:

 <form id="form" action="" method="post" enctype="multipart/form-data">
  <div class="file-uploader-wrapper">
      <input id="file-uploader" class="file-uploader-input" type='file' onchange="retrieveImageFromUpload(this);"/>
      <button class="file-uploader-btn" type="button">Select an image</button>
  </div>
</form> 

 <div id="map-view"></div>

js:

let allImages = [];
let displayImages = document.getElementById("map-view");
let imagesCounter = 0;

$(".file-uploader-btn").click(function() {
  $("#file-uploader").click();
});

function retrieveImageFromUpload() {
   let imgReader = new FileReader();
   imgReader.readAsDataURL(document.getElementById("file-uploader").files[0]);

   imgReader.onload = function (imgReaderEvent) {
        let imageUploadedName = imgReaderEvent.target.result;
        return readUploadedImage(imageUploadedName);
    };
}

//create HTML image from the uploaded img
function readUploadedImage(imageUploadedName) {

  imagesCounter++;

  let img = document.createElement('img');
  img = {
    "id": 'screen-' +  imagesCounter,
    "src": imageUploadedName,
    "alt": 'Default-alt'
  };

 allImages.push(img);

  console.log(allImages);

var imgHTML = img.cloneNode(true);
imgHTML = "<img id='"+ img.id + "' src='" + img.src + "' alt ='" + img.alt + "' />";
displayImages.appendChild(imgHTML);

console.log("-------------");

}

我的问题在创建图像元素后开始；我想我很困惑，但我无法真正理解在哪里或为什么。

• 我使用“let img = document.createElement('img');”创建图像
• 然后，我将其属性设置为对象，我认为这就是我搞砸的地方。然后，我将这个对象放入我的数组(称为 allImages)中，所以，这就是我目前想要的。
• 但是，在将这个对象添加到我的数组中的一部分中，我想将其显示为 HTML 图像，我正在尝试使用“appendChild”，但肯定是真的出了问题，因为我收到了错误，但我不是使用节点元素进行操作。

有人可以插入我走上正确的道路吗？

谢谢

Answer 1

在这里我更正了你的codepen .

您必须创建一个 DOM 元素才能将其添加到页面:

var imgHTML = document.createElement("IMG");
imgHTML.setAttribute("id", img.id);
imgHTML.setAttribute("src", img.src);

已测试并正常工作。