Are dynamically inserted tags meant to work?

If you’re writing it to an innerHTML property, it won’t work except for in IE when the DEFER attribute is present:

scriptParentNode.innerHTML = '<span/><script defer="defer" type="text/javascript">blah();</script>';

Your options are, a) use the DOM to create the element and append it:

var head = document.getElementsByTagName("head")[0];
var sTag = document.createElement("script");
sTag.type = "text/javascript";
sTag.text = "blah();";

or b) use document.write at the time your HTML is parsed (but not after!)

  <script type="text/javascript">
    document.write('<script type="text/javascript">blah();</script>');


Seeing as I was downvoted apparently for the information regarding the defer attribute being incorrect, I feel it necessary to post a working example from the MSDN documentation. Whilst it is true that IE removes NoScope elements from the beginning of an innerHTML string, it’s possible to work around this by adding a scoped element to the beginning of the HTML string (example updated above):

function insertScript(){
    var sHTML="<input type=button onclick=" + "go2()" + " value="Click Me"><BR>";
    var sScript="<SCRIPT DEFER>";
    sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT" + ">";
    ScriptDiv.innerHTML = sHTML + sScript;
<BODY onload="insertScript();">
    <DIV ID="ScriptDiv"></DIV>

Feel free to actually click the “Show me” button in the MSDN documentation for a working example. [link]

Leave a Comment