How to insert an image into some html through JQuery?

Question

Howdy Guys,

Here is the situation. I've got a standard link like so:

<h2><a href="#">Link Title</a></h2>

Now, I want to insert a background to make it look like a button, so I add a span with JQuery like so:

$(document).ready(function()
{
      $(".post a").wrapInner("<span></span>");
});

(The html for the link can be found here, http://flickrental.co.uk/ - By the way, this is not the site, just the code for the link)

Now I can transform the link into a nicer "button" and I'm quite happy... But I had another thought, what If I could add a small arrow image inside the link (To the right of the text) (This site is an affiliate site and the button should increase the CTR as well as the arrow image)

But I can't seem to find the right syntax to do this.

Any ideas?

Answer 1

You should probably add the arrow with css. Given a 10 pixel wide arrow:

.post a {
    padding-right: 10px;
    background: url(arrow.png) no-repeat right 50%;
}

But if you already are using the background image for something else, you can add the image with jquery:

$("<img src='arrow.png'/>").prependTo(".post a");

I presume from your question that you don't have access to change the HTML directly. Otherwise, that would probably be the best solution.