Copy and manipulate ALT on Image

Question

Hi there

I'm a new visitor, and relativily new at jQuery.

I have an image with an ALT text that I would like to be shown, in the SPAN, under the image, and manipulated to replace "-" with B- and I-tags...

Current HTML:

<span class="alignright">
    <img src="sys/billeder/medarbejdere/tommy_stor.jpg" width="162" height="219" title="Name - Age" />
    <span></span>
</span>

Wanted Output

<span class="alignright">
    <img src="sys/billeder/medarbejdere/tommy_stor.jpg" width="162" height="219" title="Name - Age" />
    <span><b>Name</b> <i>Age</i></span>
</span>

I have used this jQuery to extract the ALT, and put it in the SPAN:

var alt = $("#hoejre p span img").attr("alt");
$("#hoejre p span span").text(alt);

The extraction works like a charm, but I need the SPAN:

...to start with "<b>"
...to replace the "-" with "</b> <i>"
...and end with "</i>"

Answer 1

What about this:

$("#hoejre p span span").html('<b>'+alt.replace('-', '</b> <i>')+'</i>');

replace is just regular JavaScript, html() a JQuery method (documented here).

Answer 2

var alt = $("#hoejre p span img").attr("alt");
$("#hoejre p span span").html("<b>"+alt.replace("-", "</b><i>")+"</i>");

Answer 3

Not sure if I read this right, but how about changing your last line to:

$("#hoejre p span span").html("<b>" + alt.replace("-", "</b> <i>") + "</i>");