リンクがあるimgの配列

Question

この画像をどのようにリンクにするのだろうか？表示するすべての画像にリンクを追加する単なる方法です。

var imgs = ['http://radio-maghreb.net/inter/smooth24.7.png', 'http://radio-maghreb.net/inter/smooth24.7.png', 'http://radio-maghreb.net/inter/smooth24.7.png']; 
 
var container = document.getElementById('imageContainer'); 
 
var docFrag = document.createDocumentFragment(); 
 

 
imgs.forEach(function(url, index, originalArray) { 
 
    var img = document.createElement('img'); 
 
    img.src = url; 
 

 
    docFrag.appendChild(img); 
 
}); 
 

 

 
container.appendChild(docFrag);

#imageContainer img { 
 
    width: 53px; 
 
    height: 53px; 
 
    border-radius: 5px; 
 
    margin: 10px; 
 
}

<div id="imageContainer"></div>

Answer 1

あなたはそのように行うことができます。

var imgs = [ 
    'http://radio-maghreb.net/inter/smooth24.7.png', 
    'http://radio-maghreb.net/inter/smooth24.7.png', 
    'http://radio-maghreb.net/inter/smooth24.7.png' 
]; 
var container = getElementById('imageContainer'); 
var docFrag = document.createDocumentFragment(); 

imgs.forEach(function(url, index, originalArray) { 
    var link = document.createElement('a'); 
    link.title = 'My title'; 
    link.href = 'http://example.com/my_path/to/some_page'; 

    var img = document.createElement('img'); 
    img.src = url; 

    link.appendChild(img); 
    docFrag.appendChild(link); 
}); 


container.appendChild(docFrag); 

我々は最初のリンク（「」要素）、その後、我々は最終的にそのリンクに画像を添付し、を作成私たちはコンテナへのリンクを添付します。

これは、とりわけ1つの解決策です。 .innerHTML（）を使うこともできますし、jQueryのようなライブラリを使ってもっと効率的に行うこともできます。