Inserting JavaScript Variables into HTML

[erebus]

So i have aquired my data from a external source, plaed it within a function and have it in a state which i can define it with JS variables. URL for images, some text strings, etc...

Now i have an fully designed site with filler images and ipsum text that was all for the design process.

How do i now replace the images via the js variable containing the url for the images and the text etc....

document.getElementById().src=""?

But this seems to show a second of the original image before replacing it with the queried new image...

document.write?

Would i build the entire section of HTML code into document.write commands and insert the JS variables in that mannor?

what exactly is best practice for this? and of course most seamless for the end user.

[Old Pedant]

document.getElementById().src=""?

But this seems to show a second of the original image before replacing it with the queried new image...

That's the right way, but the question is: Why would you have something OTHER than the first image there in the first place? If it takes a second or two to figure out what you need to display, maybe you should instead show something completely different--a kind of "please wait" placeholder?--until you have all your content ready to display.

document.write is considered obsolete and is clearly not the preferred way to go. Among other things, you can *NOT* use document.write after a page is loaded (after the </body> and </html> tags have been processed by the browser). If you do so, you will WIPE OUT ALL PRIOR CONTENT of the page, including even the JavaScript code you use to do the document.write! So that means you MUST use document.write DURING the creation of the page. And if your filtering et al. takes several seconds to complete, that means that the browser will be showing *nothing* (or at least an incomplete page) until you complete the last processing and the last document.write.

So... Methinks you need to come up with a way to make your page look good for those few seconds it takes to do the processing.

[erebus]

Originally Posted by Old Pedant

That's the right way, but the question is: Why would you have something OTHER than the first image there in the first place? If it takes a second or two to figure out what you need to display, maybe you should instead show something completely different--a kind of "please wait" placeholder?--until you have all your content ready to display.

document.write is considered obsolete and is clearly not the preferred way to go. Among other things, you can *NOT* use document.write after a page is loaded (after the </body> and </html> tags have been processed by the browser). If you do so, you will WIPE OUT ALL PRIOR CONTENT of the page, including even the JavaScript code you use to do the document.write! So that means you MUST use document.write DURING the creation of the page. And if your filtering et al. takes several seconds to complete, that means that the browser will be showing *nothing* (or at least an incomplete page) until you complete the last processing and the last document.write.

So... Methinks you need to come up with a way to make your page look good for those few seconds it takes to do the processing.

Excellent, thank you for the definitive explanation!

The images are there as... i guess you would call them stock images mearly placed for the design and layout aspects. I removed them and the without seeing the images change and instead seeing the images appear a brief moment after the page loads is almost acceptable... if even noticable if i wasent staring directly at it like the person who just made a change to it.. lol

if the JSON request drags out and there is a longer delay... i guess i can aquire a loading image or something of the sort as xelawho recommended.

thanks again for the help