Why can't I add a string containing a script tag to innerHTML in IE

Question

Hi,

I'm trying to do the following (I'm using the prototype library):

var div = document.createElement('div');
div.innerHTML = '<script src="somescript.js"></script>';
$('banner').insert(div);

In IE, div.innerHTML property is always equal to "" after I set the property in the second line.

This snippet is inside a function which is overriding document.write() in an external vendor script, so that is why I am doing it this way rather than creating a script element and appending it to the div element directly.

Any help would really be appreciated, this is giving me grey hairs!

Answer 1

Have you tried to add inline JS instead of loading a .js file? I've done this in the past and it worked fine for me. Not sure if that would still work with the lastest browsers / security missery.

HTH.

Answer 2

You could try to do something like this instead:

function loadScript(src) {
       var script = document.createElement("script");
       script.type = "text/javascript";
       document.getElementsByTagName("head")[0].appendChild(script);
       script.src = src;
}

or do

..
div.innerHTML = "<script src=\"somescript.js\"></script>";
..

Answer 3

Your script tag is probably managing to be interpreted independently. Try:

div.innerHTML = '<scr' + 'ipt src="somescript.js"></scr' + 'ipt>';

Answer 4

Your quotes are wrong on the second line. Should be:

div.innerHTML = '<script src="somescript.js"></script>';