我有一組影像，并希望使用回圈將它們顯示在 div 標記中，但沒有影像顯示。
const images = ["images/image1", "images/image2", "images/image3"];
for (let x = 0; x < images.length; x ) {
const element = '<img src="' images[0] '">'
let pic = document.querySelector('.images').innerHTML = element;
pic;
}
uj5u.com熱心網友回復：
嘗試appendChild：
const images = ["images/image1", "images/image2", "images/image3"];
const container = document.querySelector('#images');
for (let image of images) {
htmlImage = document.createElement("img");
htmlImage.src = image;
container.appendChild(htmlImage);
}
uj5u.com熱心網友回復：
自從您使用images[0]. 您應該使用索引。
const images = ["http://placekitten.com/200/300", "http://placekitten.com/100/300", "http://placekitten.com/400/300"];
for (let x = 0; x < images.length; x ) {
const element = '<img src="' images[x] '">'
document.querySelector('.images').innerHTML = element;
}<div class="images"></div>您想使用 innerHTML 添加影像，使用map()andjoin()將是一個更好的解決方案，因為您只會更新 DOM 一次。
const images = ["http://placekitten.com/200/300", "http://placekitten.com/100/300", "http://placekitten.com/400/300"];
const myHtml = images.map(function(path) {
return '<img src="' path '">';
}).join('');
document.querySelector('.images').innerHTML = myHtml;<div class="images"></div>其他選項是創建元素并附加它們。
const images = ["http://placekitten.com/200/300", "http://placekitten.com/100/300", "http://placekitten.com/400/300"];
const outElem = document.querySelector('.images');
images.forEach(function (path) {
const img = document.createElement("img");
img.src = path;
outElem.appendChild(img);
});<div class="images"></div>uj5u.com熱心網友回復：
試試這個：
const images = ["images/image1", "images/image2", "images/image3"];
for (let x = 0; x < images.length; x ) {
const element = '<img src="' images[x] '">'
document.querySelector('.images').innerHTML = element;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/424452.html
標籤：javascript 循环
上一篇：Python代碼中的“whilenotloop”問題
下一篇：回圈通過有效負載以獲取所有頁面