时间戳

首页 > 解决方案 > 添加包含图像的 div 的 Javascript 函数

javascript - 添加包含图像的 div 的 Javascript 函数

问题描述

我正在尝试创建一个函数来创建一个 div，在 div 中附加一个图像，然后将 div 附加到主体上，使用 for 循环 3 次。我是 JS 的新手，这让我很困惑，谁能让我知道我在这里做错了什么？

function addImages(){
    for(var i=0; i<3; i++){
       var imgDiv = document.createElement("div");
       imgDiv.id = "div"+i;
       var image = document.createElement("img");
       image.setAttribute("src", "https://picsum.photos/100/150");
       imgDiv.appendChild(image); 
       document.getElementById('body').appendChild(imgDiv);
       }
   }

标签： javascripthtmlfunction

解决方案

我已经做了一些类似的 ReactJS，我相信它会很好地翻译。所以我创建了一个包含图像位置的列表，然后通过它们进行映射。

const addImages = () => {
    let imageList = ["image1", "image2", "image3"]

    return imageList.map(image => <div><img src={image}/></div>)
}

推荐阅读