jQuery: Easiest way to wrap an image tag with an A anchor tag

css, dom, html, image, jquery

Solution

you have already many answers, but (at least before I started writing) none of them will correctly work.

They do not take into account that you should not wrap the `<img>` with multiple `<a>` tags. Furthermore, do not try to unwrap it if it is not wrapped! You would destroy your DOM.

This code simple does a verification before wrapping or unwrapping:

$(function(){
    var wrapped = false;
    var original = $(".onoff");

    $("#button1").click(function(){
        if (!wrapped) {
            wrapped = true;
            $(".onoff").wrap("<a href=\"link.html\"></a>");
        }
    });

    $("#button2").click(function(){
        if (wrapped) {
            wrapped = false;
            $(".onoff").parent().replaceWith(original);
        }
    });
});

Good luck!

Problem

This is a simplified version of my problem. I have two buttons, and one image. The image code is something like this ``` <img class="onoff" src="image.jpg"> ``` When I press button one I want the image to be wrapped in an A tag, like ``` <a href="link.html"> <img class="onoff" src="image.jpg"> </a> ``` And when I press the other button, the A tags should be removed. What's the easiest way of doing this with jQuery?

Original source