javascript - 如何使用函数显示图像？

Question

我想显示一些我存储在文件夹中的图像(*.jpg)。我想使用函数来显示这些图像。为此，我创建了一个由对象组成的数组，每个对象都包含一个我在函数中使用的 id。代码如下:

//employee array
var employees =[{
    name:"jacob",
    age :23,
    city:"Boston",
    yoe :12,
    image :'d.jpg',
    id : 1
    },
    {
    name:"aaron",
    age :21,
    city:"Nevada",
    yoe :12,
    image :'b.jpg',
    id : 2
    },
    ...   
}];

我使用员工id(图像的名称)来显示图像。以下是图像的函数:

function getimages(){
    for(var i = 1;i <= employees.length;i++){
        document.getElementById("list + i").innerHTML = employees[i].id+".jpg";
    }
}
getimages(); // to get the images

这是我想要显示这些图像的 HTML 部分:

<ul>
    <li id="list1">A</li>
    <li id="list2">B</li>
    <li id="list3">C</li>
    <p>123213</p>
</ul>

Answer 1

您需要将 document.getElementById("list + i") 替换为 document.getElementById("list"+ i)。

有时，动态创建 DOM 元素并附加它们可能是值得的，因为您永远不知道何时需要更新这些新元素。您可能会遇到这样的情况:

function getimages(){
        for(var i = 1;i <= employees.length;i++) {
             var elem=document.getElementById("list"+i);
             var imagePath=employees[i].id+".jpg";

             // append text
             elem.appendChild( document.createTextNode(imagePath) );

             // append image
             var img = document.createElement("img");
             img.src = imagePath;
             elem.appendChild(img);
        }
}