イメージを含むクラスを含むdivをJS内に追加します

Question

最終結果がHTMLにこれを追加するようにいくつかのJSを記述しようとしています。私は、インデックスを付けるための一連のイメージを用意し、そのイメージにページを埋め込む予定です。これを行う簡単な方法はありますか？画像ごとにクラスを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

これは1つの方法です。

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>