Insert Image Dynamically with jQuery

html, image, javascript, jquery

Solution

$('#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

Problem

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.

Original source