/    Sign up×
Community /Pin to ProfileBookmark

InnerHTML problem image problem

Copy linkTweet thisAlerts:
Mar 16.2009

I’m dynamically creating a div and adding an image to it. When I set the image using a string like the code below, it works fine, the image appears.

[code]

newdiv.innerHTML = “<img src=’Images//gallery3.jpg’ />”;
document.body.appendChild(newdiv);
[/code]

however when I use a variable like in the code below it doesn’t work, even though the variable is set to the same string as the one above. It just outputs the text < img src =’Images//gallery3.jpg’ />.

[code]
 var image = ‘&lt img src =” + imageFile + ” /&gt’;
newdiv.innerHTML = image;
document.body.appendChild(newdiv);
[/code]

Anybody able to explain why it’s not working?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMar 16.2009 — newdiv.innerHTML = '&lt;img src="'+ imageFile +'" /&gt;';
Copy linkTweet thisAlerts:
@badnmadMar 16.2009 — The reason why
[CODE]
var image = '&lt img src ='' + imageFile + '' /&gt';
newdiv.innerHTML = image;
document.body.appendChild(newdiv);
[/CODE]
does not work is because you are using HTML ASCII characters instead of the actual character. The browser then converts the ASCII code into a character without reading it as actual HTML, it reads it as text. ASCII characters are very helpful when you are trying to write code as text so the user can see.

You should use this:
[CODE]
newdiv.innerHTML = "<img src="" + imageFile + "">";
document.body.appendChild(newdiv);
[/CODE]

Hope this helps, good luck!
Copy linkTweet thisAlerts:
@bfitzpauthorMar 16.2009 — Ok great, that fixed it. I have another issue now though -

using

<i>
</i>document.body.appendChild(newdiv);


uses the main window as a container for 'newdiv'. However I want 'newdiv' to be contained inside another div, here's what I'm doing

<i>
</i>var galleryArea = document.getElementById('galleryArea');
galleryArea.appendChlid(newdiv);


'galleryArea' is a div on my page that I want to use as the container for 'newdiv' but when i use the code above I get nothing at all, the 'newdiv' doesn't appear. Can you tell me what's happening? Is it not possible to append a div to another div?
Copy linkTweet thisAlerts:
@FangMar 16.2009 — What is [I]newdiv[/I]?
Copy linkTweet thisAlerts:
@bfitzpauthorMar 16.2009 — its the dynamically created div from my first example that i want to add to another div called 'galleryArea'.
Copy linkTweet thisAlerts:
@FangMar 16.2009 — Typo: galleryArea.append[COLOR="Red"]Chlid[/COLOR](newdiv);
Copy linkTweet thisAlerts:
@bfitzpauthorMar 16.2009 — god damn it hehe! thanks a million man, you've saved me alot of hassle, ive been looking at the code for an hour and a half an I never spotted it.
×

Success!

Help @bfitzp spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...