This does not seem to be possible... for a start you would need to escape the "/" in the closing script tag within your innerHTML string (like so... <\/script>) as otherwise the browser will get confused as to where the real closing script tag is.

Although the script is written to the document using innerHTML, it does not seem to be parsed by the browser and is therefore not executed - even if you were to write out a function and try and call that function from somewhere else, to the browser it doesn't exist.

Must admit, I hadn't tried this before... anyone?

I'm not sure if it's possible to create a <script> element using the DOM and try to append that to the page?!?

Hi,

Assuming '2' is a variable surely you can just put:

<script type="text/javascript">
function something(id){
el = document.getElementById(id);
el.innerHTML = "a" + 2 + "a";
}
</script>
<div id="contentarea">Div is here - <a href="javascript:something('contentarea')">change content</a></div>

Andrew

Essentially, what you're trying to do is probably pointless.

The reason you are using javascript to load a div is because there is no client-side include for text/html built into the html standard. However, client-side include does exist for text/javascript - that's what the src attribute is for.

You need to rethink the problem - essentially, break it down into two parts. The javascript that you want to import must be placed in an external file that can be included directly in your primary page.

Kaled.

Incidentally, your code:

el.innerHTML = "a<script>document.write(2)<\/script>a";

... just outputs:

aa

---------------------

Purely out of interest, I tried creating the <script> element using the DOM methods createElement() and appendChild() - to my surprise writing out inline javascript worked in FF and Opera - but gave an error in IE6. However, you could create a <script> element that accessed an external javascript file, via the src attribute, and this worked in all three browsers.

Writing inline javascript (OK in FF and Opera - not IE6):

function writeScript() { 
var scr = document.createElement('script'); 
scr.setAttribute('type','text/javascript'); 
var code = document.createTextNode("function newFunc() {alert('Hello World');}"); 
scr.appendChild(code);// IE6 Error - "Unexpected call to method or property access" 
document.body.appendChild(scr); 
} 
1. <a href="javascript:writeScript();">Write script</a> 
2. <a href="javascript:newFunc();">Call newFunc()</a>

Writing <script> tag to reference external JS file in src attribute (OK in FF, Opera and IE6):

function writeScript() { 
var scr = document.createElement('script'); 
scr.setAttribute('type','text/javascript'); 
scr.setAttribute('src','newfunc.js'); 
document.body.appendChild(scr); 
} 
1. <a href="javascript:writeScript();">Write script</a> 
2. <a href="javascript:newFunc();">Call newFunc()</a>

I suppose this could enable you to conditionally include different JS files (containing 'data') depending on user input... hhmmmm...

But like kaled suggests, probably best rethink the problem.

Thanks all for the replies. Let me give a little more explanation as to why I'm doing this;

Instead of having the page reload after every click in the menu, I decided to use a little ajax.

var req;
function loadXMLDoc(url,id){
req = false;
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); // IE
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); // Older
} catch(e) {
try {
req = new XMLHttpRequest(); // Mozilla
} catch(e) {
req = false;
alert('Error loading XMLHTTP object.\nBrowser undsupported.'); // browser not supported
}
}
}
if(req){
req.onreadystatechange = function(){
if (req.readyState == 4 && req.status == 200){
// replace contents of div
el = document.getElementById(id);
el.innerHTML = req.responseText;
}
}
req.open("GET", url, true);
req.send("");
}
}

So I have my content built into pages that I call using this function.

My problem is that some of these pages have Javascript (stuff like mouse overs and form validations) and that's where my problem is.

Guess there's no way around it huh?

[edited by: Trace at 12:57 pm (utc) on Sep. 20, 2006]

Javascript that's entirely embedded in event handlers should be ok anyway. Javascript contained within <script></script> tags must be placed in an external file and included in the main page together with any other existing external javascript.

Apart from anything else, this is tidier, will reduce bandwidth and may even result in slightly quicker page transitions.

It also sounds like you are trying to create a frame-like system which might be better achieved by other means, e.g. using <iframe>. However, you should probably give careful consideration to spider accessibility if you want these pages indexed by Google, etc.

Kaled.

And to add to what Kaled was saying, your pages will not be accessible to people with JavaScript disabled, or (I assume) to people using screen readers. You should rething this approach.

JavaScript should be used for applying behaviors to your site, but your site should not be dependent on it.