添加div與圖像內部的類與JS

Question

我想寫一些JS，以便最終結果將此添加到HTML。我計劃有一個圖像數組索引，並用圖像填充頁面。有沒有一個簡單的方法來做到這一點？我是否需要將類切換爲每個圖像的ID？

<div class="box"> 
    <div class="boxInner"> 
     <img src="http://placehold.it/480x480"/> 
    </div> 
</div> 

我已經想出瞭如何添加一個div與類。

var newInner = document.createElement('div'); 
newInner.className = 'boxInner'; 
document.getElementById("wrap").appendChild(newInner); 

我也想出瞭如何追加圖像。我被困在試圖把所有這些放在一起。

var newImage = document.createElement("img"); 
newImage.setAttribute("src", "http://placehold.it/480x480"); 
document.getElementById("wrap").appendChild(newImage); 

Answer 1

假設你有與IMG SRCS的陣列，並用 '盒子' 的id一個div：

var box = document.getElementById('box'); 
for (var i = 0; i < imgs.length; i++) { 
    var newInner = document.createElement('div'); 
    newInner.className = 'boxInner'; 
    var newImage = document.createElement('img'); 
    newImage.setAttribute('src', imgs[i]); 
    newInner.appendChild(newImage); 
    box.appendChild(newInner); 
} 

Answer 2

這是這樣做的一種方式。

var images = ["http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg", "http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg", "http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg", "http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg"]; 
 

 
for (var i = 0; i < images.length; i++) { 
 
    var container = document.getElementById("container"); 
 
    var imgElement = document.createElement("img"); 
 
    imgElement.src = images[i]; 
 
    container.appendChild(imgElement); 
 
}

<div id="container"></div>