是否可以通過javascript將所有html圖像轉換為鏈接？

Question

我想通過外部js文件將每個<img>轉換為指向其自身（文件）的鏈接。

我的思考過程是，我可以定位所有img元素，然后獲取圖像src並在img元素周圍放置指向它的鏈接。 例如：

轉向：

<img width="281" vspace="7" hspace="5" height="215" align="left" alt="img1" src="cits/images/image001.jpg"></img>

變成這個：

<a href="cits/images/image001.jpg" target="_blank"> <img width="281" vspace="7" hspace="5" height="215" align="left" alt="img1" src="cits/images/image001.jpg"></img> </a>

看起來我可以將img src作為變量來獲取，也可以找到img元素，但是我不確定如何在img周圍添加鏈接。

Answer 1

抓取所有圖像。

var images = document.getElementsByTagName('img');

編寫一個函數，用新的標記替換圖像的外部outerHTML ，包括指向圖像src屬性的鏈接，該鏈接包括圖像的舊outerHTML 。

function makeLink(image){
    image.outerHTML = '<a target="_blank" href="' + image.src + '">' + image.outerHTML + '</a>';
}

循環瀏覽圖像，然后將每個圖像提交到makeLink函數。

for(var i = 0, l = images.length; i < l; ++i){
    makeLink(images[i]);
};

Answer 2

以防萬一你使用jQuery

$('img').each(function(ix, image){
  $(image).wrap('<a target="_blank" href="' + $(image).attr('src') + '"></a>');
})

Answer 3

如果您願意使用jQuery ，則代碼非常簡單：

$("img").each(function () {
    $(this).wrap($("<a target='_blank'/>").attr("href", $(this).attr("src"));
});

否則，您將不得不研究原始的JavaScript解決方案，該解決方案會更加詳細。 參見@Barney的答案。