Insert Image Dynamically with jQuery

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.

thecodeparadox · Accepted Answer · 2012-05-28 18:45:37Z

5

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

edited May 28, 2012 at 18:45

answered May 28, 2012 at 18:27

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

L84 Over a year ago

Thanks for the help, I have tried the first code listed and it doesn't work. I do not get any errors on the page just no icon.

thecodeparadox Over a year ago

@Lynda your image inserting code is outside of $j(document).ready() function. put the above code within that function and I think it will works just fine

L84 Over a year ago

Thanks for your help, that did not work, I believe it is conflicting with some other scripts. I have had this issue before, no errors are thrown but it just doesn't work. With that said trying to work out this issue I came across the code in the program that I can edit to insert my icon. So now I do not need the jQuery solution. Thank You for your help and assistance with my issue. =>

adeneo · Accepted Answer · 2012-05-28 18:50:20Z

2

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

or

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

edited May 28, 2012 at 18:50

answered May 28, 2012 at 18:24

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

thecodeparadox Over a year ago

@adeneo class can't be used, you should use "class" or className

adeneo Over a year ago

@thecodeparadox - I'll add some quotes just for you, for me it works fine without them!

thecodeparadox Over a year ago

@adeneo yup mate, you add the "" later, but that don't when I wrote the comment

Musa · Accepted Answer · 2012-05-28 18:25:52Z

1

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

answered May 28, 2012 at 18:25

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

Insert Image Dynamically with jQuery

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related