在网站加载时,如何使用Javascript动态地包装链接中的所有图像？

Question

我几乎没有任何使用DOM和使用Javascript的经验,我有一个非常具体的任务,我正在努力完成.

假设我的HTML中有一个图像:

<img src="foo.jpg" />

当网站加载时,我想拍摄该图像(实际上是文档中的所有图像),并将它们包装在一个链接中:

<a href="http://www.foobar.com"><img src="foo.jpg" /></a>

我可以用什么来完成这个？对于这项具体任务,谷歌并没有为我提供太多帮助.在加载时,我可以访问并迭代文档中的所有图像...但我不知道从那里去哪里以便将图像包装在链接中.

Answer 1

你可以尝试一下这些行:

window.onload = function() {
    var images = document.getElementsByTagName('img');
    for (var i = 0, image = images[i]; i < images.length; i++) {
        var wrapper = document.createElement('a');
        wrapper.setAttribute('href', 'http://www.foobar.com');
        wrapper.appendChild(image.cloneNode(true));
        image.parentNode.replaceChild(wrapper, image);
    }
};

我建议你使用优秀的jQuery库来操作DOM:

$(function() {
    $('img').wrap('<a href="http://foo.com">');
});