Write contents, including JS, into DIV using innerHTML

Testing WebmasterWorld CSS Forum:
http://www.webmasterworld.com/javascript/3089095.htm

Div is here - change content using innerHTML

Call newFunc() - after changed content (and written function using innerHTML / DOM method)

Conclusion

You cannot write out script using innerHTML - it is not parsed by the browser or executed. However you can write out a script tag using the DOM methods .createElement(), .appendChild() and this will work in FF and Opera (but not IE6) !! However, you can write out a script tag (using DOM methods) referencing an external JS file (via the src attribute), and this will work in all 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...

[Home]