Append anchor tag

Question

In my application, I want to make an image a link to another page. Image is placed in html as,

<div class="rightbuttoncontainers_footer">
  <div class="forfooterimg" id="twitterlink_indv">
    <img src="Images/tweatus.png" width="30" height="30" alt="tweat">
  </div>
</div>

I want to make those image as links via script, I tried the following

var twit_lk='https://twitter.com/';
$('#twitterlink_indv').append('<a href="'+twit_lk+'"/>');

But the output of the above code is like this,

<div class="rightbuttoncontainers_footer">
  <div class="forfooterimg" id="twitterlink_indv">
    <img src="Images/tweatus.png" width="30" height="30" alt="tweat">
    <a href="https://twitter.com/"></a>
  </div>
</div>

But, I want the output like the following,

<div class="rightbuttoncontainers_footer">
  <div class="forfooterimg" id="twitterlink_indv">
    <a href="https://twitter.com/">
      <img src="Images/tweatus.png" width="30" height="30" alt="tweat">
    </a>
  </div>
</div>

How can I make it work?

Please help,

Thanks

Answer 1

Have a look at .wrap() method documented here.

$('#twitterlink_indv img').wrap('<a href="' + twit_lk + '" />');