Question

124

Insert Image Dynamically with jQuery

rated 0 times [ 129] [ 5] / answers: 1 / hits: 16197 / 12 Years ago, mon, may 28, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janettejordynm

Add To Favorites

Follow

Total Points: 550

Total Questions: 94

Total Answers: 98

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

janettejordynm questions

1 Chunk file upload with axios

Tue, Nov 24, 20, 00:00, 4 Years ago

1 Node unable to find module alias defined in tsconfig and package.json

Thu, Jun 18, 20, 00:00, 4 Years ago

1 How to check if an entered answer is correct with HTML code?

Sat, May 23, 20, 00:00, 4 Years ago

1 Can someone explain this piece of Javascript code?

Mon, Apr 6, 20, 00:00, 4 Years ago

1 AES Encryption/Decryption in Node JS similar to Java

Tue, Feb 18, 20, 00:00, 4 Years ago

View All

answered 12 Years ago melindab · Accepted Answer

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