DOM dynamic div content

[Strangeplant]

Hi, I'm getting nowhere trying to do this, so I need some help.

I have an empty div:

<div id="imageArray" name="imageArray" align="center">
</div>

And I want to add some code to it (in this case a call to a javascript function that develops the div content) when a onclick event occurs. I can test it with the code imbedded and it works perfectly.

So I figure there should be so way to use

  	document.getElementById('imageArray').innerHTML="<script type='text/javascript'> displayMyPage(dimensionOfArray, gallerylinks);</script>";

but that sure doesn't work, only pastes code text at the top of the page with div unchanged. I've tried other variants using appendChild without success. How can I do this. Oh BTW, I need to remove it as well.

Your advice is appreciated. Thanks in advance

[codeexploiter]

You can use insertAdjacentHTML Method for doing the script insertion.

You can view a demonstration of the same here

MSDN

[jscheuer1]

Dynamically generated scripts, however they are generated, generally go into the head, if at all, of the document.

There really should be little reason to need to do so though. Just write your code to do what you want it to do to the element in question. For example, instead of inserting a script like this into an element by its id:

<script type="text/javascript">document.write('<img src="whatever.gif">');</script>

Have your script fetch the element by id and and insert the HTML code directly:

document.getElementById('imageArray').innerHTML='<img src="whatever.gif">';

[jscheuer1]

You can use insertAdjacentHTML Method for doing the script insertion.

You can view a demonstration of the same here

MSDN

Please, no IE specific solutions without representing them as such.

[Strangeplant]

There is an onClick event that calls a function. In this function several things go on, the last of which is the

document.getElementById('imageArray').innerHTML="<script type='text/javascript'> displayMyPage(dimensionOfArray, gallerylinks);</script>";

During page load as the javascript code is evaluated, this line is written as text to the top of the document and the page propper follows. It is not evaluated later when needed, at least in FF.

This line is supposed invoke another function displayMyPage() to finish with the display in the div. It is not a simple task of throwing out a simple image. It involves sorting server directory array names brought in from a previous php script, selecting a specific range based on user selected search variables. There is an array of images with text under each and a multiple page bar and rotation of the multiple pages dynamically based on the pagebar and forward/backward/first/last arrows. Each image has links that do things in popups, and it all works great except that I can't get this function call code written in the div. (I can manually place it in the div but then the search/selection is not done and the pages go on forever...but later it is ok when restarted because the previous search variables are pulled in from the cookie.) I see the problem as DOM code stuck in the middle of a javascript function.

What also would work would be to dynamically create a new div at the end of the page and place the function call (and the other formatting statements for the page bar function call) there. Would that make it simpler?

[jscheuer1]

It really doesn't matter how complex the script that you are trying to insert is. It needs to be rewritten to write to the division by its id, rather than by being placed in it.

Or, it could be in the division to begin with and only activated at the desired point.

Another thing to try would be to have a script tag in the division to begin with, just update its src attribute and then call its function(s).

[Strangeplant]

I see the problem, and is explained on http://msconline.maconstate.edu/tuto...dhtml03-01.htm

The document.write() method is coded in an inline script, one that is run as the page loads. 
It appears inside a <script> tag at the exact location on the page where the output should 
appear. As the page is loaded, the script is run and the output is embedded just as if it had 
been hard-coded on the page. Importantly, the document.write() method is never 
coded inside a function which is called after the page is loaded. Doing so overwrites 
the entire page with the scripted output.

So, now what can I do?

[jscheuer1]

I see the problem, and is explained on http://msconline.maconstate.edu/tuto...dhtml03-01.htm

The document.write() method is coded in an inline script, one that is run as the page loads. 
It appears inside a <script> tag at the exact location on the page where the output should 
appear. As the page is loaded, the script is run and the output is embedded just as if it had 
been hard-coded on the page. Importantly, the document.write() method is never 
coded inside a function which is called after the page is loaded. Doing so overwrites 
the entire page with the scripted output.

So, now what can I do?

Use the element's innerHTML object - code for it:

element.innerHTML='whatever';

or create and insert DOM nodes to the element.

[Strangeplant]

John, if the content of 'whatever' is javascript, it is evaluated on the spot. This won't work.

[jscheuer1]

John, if the content of 'whatever' is javascript, it is evaluated on the spot. This won't work.

Well, if it is in a function, it won't be evaluated until the function is run, assuming the browser will allow the script to be placed there in the first place. But, in a way, you are over complicating things. Just write a different script, one that puts the content (not the script code) that you want into that division at the time(s) that you want that content put there.