JQuery, How to place an image inside a div?

Question

I am trying to place an image inside a div.

function pleaseW(){
    $('#info').html("Please wait ...");                         //1 this works
    $('#info').html("<img id='busy01' src='busy01.gif' />");    //2 doesn't work
    $('#info').append("<img id='busy01' src='busy01.gif' />");  //3 doesn't work
    $('#info').prepend("<img id='busy01' src='busy01.gif' />"); //4 doesn't work
}

The image called busy01.gif is in the same folder as in the current file. The problem is that lines 2, 3, and 4 do not put an image in the div.

If I put the html directly into the page, the image shows. There has to be some unrelated problem going on with the page, as this Javascript/jQuery is perfectly valid.

Assuming the `src` attribute points to a valid image, lines 2, 3 and 4 should work. — Rory McCrossan, Jan 11 '13 at 14:07
@ATOzTOA, no, I have not any css linked to this img. I also tried to remove id attribute - doesn't work — Alegro, Jan 11 '13 at 14:14
if you put `` straight into your HTML ( not with JS - just hardcode it ) - does it work? — Zoltan Toth, Jan 11 '13 at 14:16
@ZoltanToth I was halfway through writing that when your comment popped up :) — Tom Pietrosanti, Jan 11 '13 at 14:16
There has to be some unrelated problem going on with the page, as this Javascript/jQuery is perfectly valid. — crush, Jan 11 '13 at 14:20
Hey, after placing the image without js (as Zoltan suggested), and removing it - it now works with js also !! It seems - solved. thanks a lot to EveryOne — Alegro, Jan 11 '13 at 14:20
@Alegro don't be happy - it might be just cached :) try in another browser or clear your cache — Zoltan Toth, Jan 11 '13 at 14:22
@ZoltanToth, you're right. After clearing the cache - doesn't work. — Alegro, Jan 11 '13 at 14:25
@ZoltanToth, i replaced js script from the bottom to the head of html. It works. I hope. Thanks a lot — Alegro, Jan 11 '13 at 14:56
I don't see any reason why it would work in the header but not footer.. But if it works that's good :) — Zoltan Toth, Jan 11 '13 at 15:00

score 1 · Answer 1 · answered Jan 11 '13 at 14:07

1

Try

$('#info').html("<img id='busy01' style='width:100px; height:100px;' src='busy01.gif' />");

answered Jan 11 '13 at 14:07

ATOzTOA

30,490
20
83
113

unless OP's got style setting to hide images, this has nothing to do with the problem. – Robert Koritnik Jan 11 '13 at 14:09
1

But who says that the style sets dimensions to 0? Why didn't you rather set `display` and `visbility` then? Why dimensions? – Robert Koritnik Jan 11 '13 at 14:13

score 0 · Answer 2 · answered Aug 20 '13 at 19:33

0

From the Author:

I moved the script from the bottom of the page to the head portion of the html. Now it works.

answered Aug 20 '13 at 19:33

Eric Leschinski

123,728
82
382
321

score -1 · Answer 3 · edited Aug 20 '13 at 19:39

-1

This seems to be an archaic issue with browser compatibility, not a JavaScript issue.

Each of these lines should show an image:

function pleaseW(){
    $('#info').html("<img id='busy01' src='busy01.gif' />");    //2 doesn't work
    $('#info').append("<img id='busy01' src='busy01.gif' />");  //3 doesn't work
    $('#info').prepend("<img id='busy01' src='busy01.gif' />"); //4 doesn't work
}

edited Aug 20 '13 at 19:39

Eric Leschinski

123,728
82
382
321

answered Jan 11 '13 at 14:06

crush

15,889
8
54
95

1

HTML 4 spec? What is this 1990 – crush Jan 11 '13 at 14:07
"By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39)" – Rene Pot Jan 11 '13 at 14:08
Then there is absolutely nothing wrong with that line of Javascript, and it should work. – crush Jan 11 '13 at 14:09
@crush Here's a reference to the HTML5 spec: http://stackoverflow.com/questions/4577092/is-it-acceptable-to-use-single-quotes-around-values-in-html-attributes, as you can see they are valid. Ugly, but valid. – Rory McCrossan Jan 11 '13 at 14:09
correct. It should work. Thus my question comment on the question – Rene Pot Jan 11 '13 at 14:10
@RoryMcCrossan: you should link directly to the answer instead... http://stackoverflow.com/a/4577109/75642 – Robert Koritnik Jan 11 '13 at 14:11
Seems this is actually an archaic issue with browser compatibility, not a spec issue. – crush Jan 11 '13 at 14:12
1

@RobertKoritnik Sorry, I meant to link to the HTML5 spec itself. I pasted the wrong link – Rory McCrossan Jan 11 '13 at 14:13

JQuery, How to place an image inside a div?

3 Answers3