Question

I am using a program (jAlbum) to create a gallery and in that gallery it has a place for more information about the photo. Currently it just displays Photo Info ^. I have an image I would like to insert into the span that contains the words Photo Info. I would do this in the program but after searching I cannot find that span (I believe it might be generated with javascript but I cannot find the line that generates it). So I figured I can insert this image dynamically using jQuery. I am not sure how to do this as javascript is not my strong suit. Here is how the HTML for the span looks currently:

<span id="lightwindow_info_tab_span" class="up"> Photo Info</span>

Here is how it should look after the image is inserted into the code:

<span id="lightwindow_info_tab_span" class="up"><img class="inline" 
  src="/Images/Icons/info.png" />Photo Info</span>

What is the best way to do this? Remember I am not super strong at javascript (just strong enough to break stuff => ) so please provide an example.

Answer 1

$('#lightwindow_info_tab_span')
              .prepend('<img class="inline" src="/Images/Icons/info.png" />');

Here I use .prepend(), because according to OP’s post, the image is before the Text.

You can also use .prependTo()

$('<img class="inline" src="/Images/Icons/info.png" />')
              .prependTo('#lightwindow_info_tab_span');

or

var yourImg = $('<img/>', {
                           "class" :"inline", // or className: "inline"
                            src:"/Images/Icons/info.png"
                         });

$("#lightwindow_info_tab_span").prepend(yourImg);

You could also use:

$('#lightwindow_info_tab_span').html(function(index, oldHTML) {
    return '<img class="inline" src="/Images/Icons/info.png" />' + oldHTML;
});

But I would go for options before this