如何在不使用innerHTML的情況下將圖像元素添加到javascript中的div？

Question

我想添加一個圖像到只有JavaScript的HTML頁面，我必須做到這一點，而不使用innerHTML。我似乎無法讓圖像出現。

的JavaScript

var galleryPhotos = ["gallery/galleryphoto0.jpg", "gallery/galleryphoto1.jpg", "gallery/galleryphoto2.jpg", "gallery/galleryphoto3.jpg", "gallery/galleryphoto4.jpg"]; 

function newImage(){ 

var ele0 = document.createElement("img"); 
var image = document.getElementById("image"); 
ele0.scr = galleryPhotos[0]; 
image.appendChild(ele0); 

var ele1 = document.createElement("img"); 
var image = document.getElementById("image"); 
ele1.scr = galleryPhotos[1]; 
image.appendChild(ele1); 

var ele2 = document.createElement("img"); 
var image = document.getElementById("image"); 
ele2.scr = galleryPhotos[2]; 
image.appendChild(ele2); 

var ele3 = document.createElement("img"); 
var image = document.getElementById("image"); 
ele3.scr = galleryPhotos[3]; 
image.appendChild(ele3); 

var ele4 = document.createElement("img"); 
var image = document.getElementById("image"); 
ele4.scr = galleryPhotos[4]; 
image.appendChild(ele4); 

} 

我試圖把它放到HTML中

<div id="image"></div> 

使用鉻合金的調試工具並不能幫助我。

Answer 1

您有錯別字：scr應該是src。

Answer 2

試試這個：

var galleryPhotos = ["gallery/galleryphoto0.jpg", "gallery/galleryphoto1.jpg", "gallery/galleryphoto2.jpg", "gallery/galleryphoto3.jpg", "gallery/galleryphoto4.jpg"]; 

function newImage(){ 

    var image = document.getElementById("image"); 
    var i = 0; 
    while(galleryPhotos[i]){ 
     el = document.createElement("img"); 
     el.src = galleryPhotos[i]; 
     image.appendChild(el); 
     i++; 
    } 

}