By bitsprint


2009-07-01 11:04:54 8 Comments

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!

5 comments

@Dmitriy Naumov 2011-03-29 17:24:47

you need to use escape char for the </script>

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

see why escaping / in javascript '<\/script>'?

@AwesomeYetIronicPseudonym 2011-02-10 23:59:55

This one had me stymied for a bit as well. It turns out that IE does not allow the insertion of JS directly via innerHTML unless you include the 'defer' property (see the second link below). This property is unique to IE and apparently allows IE to defer execution of any JS until after the other markup has been loaded. A warning, though...if you include two script tags (as I did), there is no guarantee which one will execute first, as the scripts appear to be loaded asynchronously. This should only be a problem if your scripts are dependent on one another (as mine were).

There is an additional caveat as well...you must insert non-script markup at the same time that you insert the script. I was unable to insert the script tags by themselves, with or without the 'defer' property. Finally, the script tags must be placed after all other non-script markup being inserted. Otherwise, the script tags are stripped out of the inserted HTML.

Here are a few references:

MS innerHTML Reference:

http://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx

MS Defer Property Reference:

http://msdn.microsoft.com/en-us/library/ms533719%28v=vs.85%29.aspx

Example of Script Insert via code (yes, it actually does work):

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/insertScript_2.htm

My Test Code:

// I downloaded the MS example file above and tweaked their script a bit, 
// resulting in this.  Using the proper approach to the defer property 
// (namely: defer="defer") did not provide me with consistent results, so 
// sticking with 'DEFER' may be necessary.
// Note:  Try moving the 'sHTML' variable to the end of the script string.
function insertScript2()
{
    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript = sHTML + "<SCRIPT DEFER type='text/javascript'> function go2(){ alert('Hello from inserted script.') } </SCRIPT" + ">";
    ScriptDiv.innerHTML = sScript;
}

@chaos 2009-07-01 11:13:46

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

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

@jcoder 2009-07-01 11:17:48

This is a common problem with using script tags in code and very likely the problem here

@bitsprint 2009-07-01 11:40:35

This is interesting. Can you elaborate?

@Jeff Ober 2009-07-01 12:04:18

Quite a few browsers mangle obvious script injections like this. The work-around is correct, though - mangle it yourself in a way that still works.

@bitsprint 2009-07-01 12:10:03

Tried the following in IE - using IE8 in IE7 mode and developer Tools debugger, value does not end up in div: <html> <body> <div id="test"></div> </body> <script type="text/javascript"> var div = document.createElement('div'); div.innerHTML = '<scr' + 'ipt src="somescript.js"></scr' + 'ipt>'; document.getElementById('test').appendChild(div); </script> </html>

@chaos 2009-07-01 12:56:16

I suspect you may need to set the innerHTML after the div is already in the DOM (after the appendChild) in order for the script to work.

@bitsprint 2009-07-01 13:37:54

that doesn't seem to make a difference in the above example.

@chaos 2009-07-01 14:10:58

Okay. I guess interpretation of the script tag isn't the issue, then.

@Juri 2009-07-01 11:13:32

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>";
..

@Juri 2009-07-01 11:24:57

I also prefer the 1st one. It is much cleaner and reusable. They 2nd was just a "try-it" suggestion if he doesn't want to use the 1st approach :)

@annakata 2009-07-01 11:28:27

I have a vague feeling the OP's problem is actually a security feature at work and your first answer here is the conventional (and non-blocking!) solution.

@bitsprint 2009-07-01 11:38:55

Agreed, that is how I would normally do it but as I said there is an external vendor script that is doing: document.write('<script src="somescript.js"></script>'); I don't know what the src will be. We are calling this script after a partial page refresh (ajax) and the document.write renders a new page, therefore I am overriding document.write in my script to try and append the script to the page rather than allow the document.write to happen. I should have been clearer about the circumstances. Does that all make sense?

@bitsprint 2011-03-30 07:49:34

I left the company where I had this issue. The issue was related to the external vendor script in the end but if it had not been I think the first solution would have been my preferred approach to this kind of issue.

@Qix 2014-04-10 17:27:22

-1, The first version will fail in modern browsers that disallow dynamic script loading.

@Jonathan van de Veen 2009-07-01 11:07:44

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.

Related Questions

Sponsored Content

4 Answered Questions

18 Answered Questions

[SOLVED] Can scripts be inserted with innerHTML?

12 Answered Questions

[SOLVED] Why don't self-closing script elements work?

8 Answered Questions

[SOLVED] Script Tag - async & defer

  • 2012-05-29 23:28:01
  • Adam
  • 190743 View
  • 483 Score
  • 8 Answer
  • Tags:   javascript html

22 Answered Questions

[SOLVED] Where should I put <script> tags in HTML markup?

9 Answered Questions

[SOLVED] Why does ++[[]][+[]]+[+[]] return the string "10"?

  • 2011-08-26 08:46:14
  • JohnJohnGa
  • 199130 View
  • 1624 Score
  • 9 Answer
  • Tags:   javascript syntax

15 Answered Questions

[SOLVED] When is a CDATA section necessary within a script tag?

2 Answered Questions

[SOLVED] make an angular app with js bookmarklet

2 Answered Questions

[SOLVED] How to insert script tag and execute response via src?

Sponsored Content