是否可以通过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的答案。