On site load, how do you wrap all images in a link dynamically using Javascript?_问答_开发者

On site load, how do you wrap all images in a link dynamically using Javascript?

开发者 https://www.devze.com 2022-12-24 20:44 出处：网络

I have barely any experience working with DOM and using Javascript, and I have a very specif开发者_开发问答ic task that I\'m trying to accomplish.

I have barely any experience working with DOM and using Javascript, and I have a very specif开发者_开发问答ic task that I'm trying to accomplish.

Let's say I have an image in my HTML:

<img src="foo.jpg" />

When the site loads, I want to take that image (all images in the document, actually), and wrap them in a link:

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

What could I use to accomplish this? Google hasn't turned up much for me with regards to this specific task. On load, I can access and iterate all the images in the document... but I'm not sure where to go from there in order to wrap the image in a link.

You could try something among the lines:

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);
    }
};

I would recommend you using the excellent jQuery library to manipulate the DOM:

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

In the following example, all images become wrapped in a link to their source. So if an image has the src of //example.com, it will be wrapped with an anchor(link) to //example.com.

Of course you don't want some of the images linked so you can add the data attribute nolink, like so:
<img src="//lorempixel.com/400/200 data-nolink />

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->

  <script>
    $(function() {  //Run once DOM is ready
      
      $('img:not([data-nolink])').each(function() {  //Iterate through each img element
      
        $(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
      
      });
    
    });
  </script>

  <style>
    h3 {
      text-align: justify;
    }
  
    img {
      width: 200px;
      margin: 24px;
    }
  </style>
  
</head>
<body>

  <h3>These images are generated randomly by <a href="lorempixel">loremPixel</a>; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
  <hr />
  <br />

  <img src="//lorempixel.com/400/200?samp1" />
  <img src="//lorempixel.com/400/200?samp2" />
  <img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
  <img src="//lorempixel.com/400/200?samp4" />
  <img src="//lorempixel.com/400/200?samp5" />
  <img src="//lorempixel.com/400/200?samp6" />
  
</body>
</html>