help changing DIV content - want to put a javascript into the DIV

[rpesq]

Hi,

I Need help changing the content of a DIV. I sincerely researched the
issue and have not found a solution except to scrap the idea and stick
with the iframe code that I had been using. My purpose here is to
avoid iframes.

I know how to change the DIV content to other basic html statements,
such as basic IMG's or Lists, but I want to put a Javascript into the
DIV, and have not found a way to do it.

The Javascript that I want to place into the DIV is a typical
tickerbox, and it is found at:
http://www.24fun.com/downloadcenter/textbgfader/textbgfader.html

I saved the code for the tickerbox to a "tickerbox.js" file.

The relevant code:

(in Head...)

..box2 {width: 408px; height:88px;}

<script>
function jumptodiv() {
document.getElementById("area2").innerHTML = ????
}
</script>


(Body...)

<DIV id="area2" style="box2">
<img src="someintroductionphoto.jpg">
<!-- the goal is to replace this photo with the Tickerbox
Javascript when user clicks the button below -->

</div>

<form>
<input type="button" value="About" onClick="jumptodiv()">
</form>

A working solution will be sincerely appreciated. (As a sidenote, I
cannot seem to get ANY javascript to work properly when "poked" into
the DIV. Even a plain alert statement will render, but will then give
an error.)

 

[RobG]

Hi,

I Need help changing the content of a DIV. I sincerely researched the
issue and have not found a solution except to scrap the idea and stick
with the iframe code that I had been using. My purpose here is to
avoid iframes.

I know how to change the DIV content to other basic html statements,
such as basic IMG's or Lists, but I want to put a Javascript into the
DIV, and have not found a way to do it.

You insert script elements just like any other element: create it, set
the attribute you want and then append it to some existing element.

e.g. create a file 'hi.js' with content:

alert('Hi');

Put the following HTML into a .html file in the same directory:

<input type="button" value="Insert script" onclick="
var d = document.getElementById('divA');

var s = document.createElement('SCRIPT');
s.type = 'text/javascript';
s.src = 'hi.js';
d.appendChild(s);
">
<div id="divA"></div>

When you click the button, the script element is appended to the div
element and the script runs.

The Javascript that I want to place into the DIV is a typical
tickerbox, and it is found at:
http://www.24fun.com/downloadcenter/textbgfader/textbgfader.html

Sorry, can't access the site from where I am. Over to you.

I saved the code for the tickerbox to a "tickerbox.js" file.

The relevant code:

(in Head...)

.box2 {width: 408px; height:88px;}

<script>
function jumptodiv() {
document.getElementById("area2").innerHTML = ????

Using the above example, something like:

var d = document.getElementById('area2');

// Delete content:
var c;
while ( ( c = d.firstChild ) ) {
d.removeChild(c);
}

// Add the script element
var s = document.createElement('SCRIPT');
s.type = 'text/javascript';
s.src = 'tickerbox.js';
d.appendChild(s);

should do the trick. The "Delete content" loop could be replaced by:

d.innerHTML = '';

but that is likely abhorrent to DOM evangelists. Since you need to use
DOM anyway you may as well stick to that and not introduce non-standard
methods when standards can be followed without inconvenience.

}
</script>
[...]

A working solution will be sincerely appreciated. (As a sidenote, I
cannot seem to get ANY javascript to work properly when "poked" into
the DIV. Even a plain alert statement will render, but will then give
an error.)

If you are attempting to insert the script using innerHTML, then that
is likely your problem. innerHTML is not part of any W3C standard, it
was invented by Microsoft and has been widely copied by browser
developers. Its behaviour is (as far as I know) 'reverse engineered'
and therefore essentially undocumented and unspecified, though
Microsoft provide some documentation on its use:

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp>

It is very useful in some situations, but use it with caution.

 

[rpesq]

Hi Rob,

Thanks. Awesome information, much appreciated. Exactly what I needed.