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

Question

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?

Answer 1

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!

Answer 2

To wrap the element

$(".onoff").wrap("<a href='link.html'></a>"); 

And to unwrap

$(".onoff").parent().replaceWith($(".onoff"));