Are dynamically inserted tags meant to work?

by

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();";
head.appendChild(sTag);

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

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

EDIT

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):

<HTML>
<SCRIPT>
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;
}    
</SCRIPT>
<BODY onload="insertScript();">
    <DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>

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

More Related Contents:

  1. How to make JavaScript execute after page load?
  2. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  3. Document.write clears page
  4. How to make HTML element resizable using pure Javascript?
  5. HTML input file selection event not firing upon selecting the same file
  6. How to display a confirmation dialog when clicking an link?
  7. Want to add “addEventListener” on multiple elements with same class [duplicate]
  8. Pass mouse events through absolutely-positioned element
  9. adding multiple event listeners to one element
  10. Ignore mouse interaction on overlay image
  11. Why don’t audio and video events bubble?
  12. Enter key press behaves like a Tab in Javascript
  13. How do you detect the clearing of a “search” HTML5 input?
  14. Detect if HTML5 Video element is playing [duplicate]
  15. Perform action when clicking HTML5 datalist option
  16. How to tell which row number is clicked in a table?
  17. How to Clear/Remove JavaScript Event Handler?
  18. Handling “onclick” event with pure JavaScript
  19. Looping through files for FileReader, output always contains last value from loop
  20. event.clipboardData.setData in copy event
  21. Popstate on page’s load in Chrome
  22. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  23. HTML5 drop event doesn’t work unless dragover is handled
  24. Reload an HTML page just once using JavaScript
  25. onclick event function in JavaScript
  26. Use JavaScript to intercept all document link clicks
  27. How to execute code in a javascript append
  28. Display Spreadsheet Data to HTML Table
  29. Display Spreadsheet Data to HTML Table
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment