insert image into html on demand via javaScript

Question

I have a html5-document that contains this element:

<div id="imgContainer"></div>

The document loads, the user logs in, and some new text gets loaded and successfully displayed via Ajax (using jQuery). After a while (when the user makes a click) a new image should be inserted into the imgContainer-div.

I do this with this jQuery-command:

$("#imgContainer").html('<img src="newImage.png" alt="">');

The file newImage.png is located in the same directory as the html-file and the javaScript-file. But it does not appear in the browser-window. But it is correctly inserted into the source-code. I checked this with the developer-tools of my browser (safari). This tools don't report any error. But still the image is invisible. When I look into the list of resources I can see no newImage.png. Obviously the browser didn't load it. But why?

The image appears in the browser-window when I enter its URL. So the browser is able to load it. But it does not when I modify the html-document. Why?

Must I add some additional code to ma javaScript to tell the browser to load the image? If so: Can you tell me this code?

Edit:

try here: http://jsfiddle.net/YCs66/1/

You're code looks correct. Do you see the image file in the network tab of the developer tools (i.e. is the browser actually requesting the image)? — Noah Freitas
– Noah Freitas, Commented Jul 5, 2014 at 16:44
are you absolutely sure that your new <img> element is being injected into the page correctly? it is possible that your script executes before the container element loads, resulting the jQuery attempting to inject the image into an element that doesnt exist, is your code placed in a block that runs after DOM loads? here have a look, your code works fine in a fiddle: jsfiddle.net/TheBanana/LWpjr — Banana
– Banana, Commented Jul 5, 2014 at 16:53
what is <img scr= ?? scr means nothing, it should be src man. (referring to your jsfiddle) — vsync
– vsync, Commented Jul 5, 2014 at 17:56
@enhzflep - you don't need a closing slash for self-contained elements. it's not 2006 anymore. — vsync
– vsync, Commented Jul 6, 2014 at 10:44
@enhzflep: the 4th word in my posting is "html5" which means: Elements that have no content (like "img") don't need a slash. If you want you can write it, but a html5-document is also wellformed if you omit it. — Hubert Schölnast
– Hubert Schölnast, Commented Jul 8, 2014 at 6:48

DWX · Accepted Answer · 2014-07-05 18:38:52Z

4

http://jsfiddle.net/dwebexperts/ZCL2U/1/

Replace this

$("#imgContainer").html('<img scr="https://www.google.com/textinputassistant/tia.png" alt="">');

with this

 $("#imgContainer").html('<img src="https://www.google.com/textinputassistant/tia.png" alt="">');

As I checked in your Fiddle, you have given source attribute as "scr".

answered Jul 5, 2014 at 18:38

DWX

2,3401 gold badge16 silver badges15 bronze badges

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

Comments

mcn · Accepted Answer · 2014-07-05 18:34:44Z

0

The problem with your code is that the .html() method only puts in the HTML without actually parsing the attributes for the DOM element. Here is the solution

HTML

<form name="myForm" action="">
<input type="button" value="click me"
onclick="loadPic()">
</form>
<div id="imgContainer"></div>

Javascript

var loadPic = function () {
    alert("loadPic started");
    $("#imgContainer").html('<img/>');
    $("img").attr("src", "https://www.google.com/textinputassistant/tia.png");
    alert("loadPic finished");
};

PLAYGROUND

Note that the <img/> that is performing .attr("src", ...) is an asynchronous function. As a result, 2 alert()s will come out before the actual image is being loaded.

edited Jul 5, 2014 at 18:34

answered Jul 5, 2014 at 18:11

mcn

7214 silver badges9 bronze badges

Collectives™ on Stack Overflow

insert image into html on demand via javaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related