Wrap an HTML tag in another using jQuery

Question

http://jsfiddle.net/62w8f00o/

I have some HTML like this:

<div><img src="http://i.imgur.com/4pB78ee.png"/></div>

and I want to wrap the img tag with an a tag using jQuery, like this:

$(function() {
  var a = '<a href="http://i.imgur.com/4pB78ee.png"></a>';
  // want to wrap the <img> with the above <a> here
});

The final result would be like this:

<div>
    <a href="http://i.imgur.com/4pB78ee.png">
        <img src="http://i.imgur.com/4pB78ee.png"/>
    </a>
</div>

How can I wrap my img with the a ?

Answer 1

You can use the jQuery wrap function .

$( "img" ).wrap( "<a href=\"http://i.imgur.com/4pB78ee.png\"></a>" );

Replace the $( "img" ) above for the actual selector, you don't want to select all images in your webpage.

Fiddle: http://jsfiddle.net/5c5bffh1/

Answer 2

The syntax is:

$('.inner').wrap('<a class="outer"></a>);

So it would be something like:

$('img').wrap('<a href="http://i.imgur.com/4pB78ee.png"></a>')

Answer 3

Use jQuerys .wrap()

$(function() {
  var a = '<a href="http://i.imgur.com/4pB78ee.png"></a>';
  $('img').wrap(a);  
});

Updated fiddle: http://jsfiddle.net/62w8f00o/1/