script tag create with innerHTML of a div doesn’t work

by

This one was trivial.

As stated in spec (8.4 Parsing HTML fragments and 8.2.3.5 Other parsing state flags,) quote:

when using innerHTML the browser will

  1. Create a new Document node, and mark it as being an HTML document.

  2. If there is a context element, and the Document of the context element is in quirks mode, then let the Document be in quirks mode.
    Otherwise, if there is a context element, and the Document of the
    context element is in limited-quirks mode, then let the Document be in
    limited-quirks mode. Otherwise, leave the Document in no-quirks mode.

  3. Create a new HTML parser, and associate it with the just created Document node.
    …

and when parsing a <script> inside

The scripting flag is set to “enabled” if scripting was enabled for
the Document with which the parser is associated when the parser was
created, and “disabled” otherwise.

The scripting flag can be enabled even when the parser was originally
created for the HTML fragment parsing algorithm, even though script
elements don’t execute in that case.

So it won’t be executed, as long as you inject it with innerHTML.

And using innerHTML will prevent the <script> element created from being executed permanently.

As stated in spec (4.3.1 The script element,) quote:

Changing the src, type, charset, async, and defer attributes dynamically has no direct effect; these attribute are only used at specific times described below.

Concluding the described below is that, it only parse the src attribute when injecting the <script> to the document (no matter which, including the temporary one created when using innerHTML.)

So, as long as you want to inject a script to the document and make it executed, you have to use script = document.createElement('script').

Set its attributes like src and type, possibly the contents inside (by using script.appendChild(document.createTextNode(content))), then append it to the document.body.

More Related Contents:

  1. Link to a file and javascript simultaneously
  2. How to create a translucent in React Native?
  3. How do I create an HTML element with attributes and events using JavaScript?
  4. Pure JavaScript equivalent of jQuery’s $.ready() – how to call a function when the page/DOM is ready for it [duplicate]
  5. How to get value of selected radio button?
  6. How to get a file or blob from an object URL?
  7. Refresh/reload the content in Div using jquery/ajax
  8. How to delete a localStorage item when the browser window/tab is closed?
  9. Animate element to auto height with jQuery
  10. How to submit a form with JavaScript by clicking a link?
  11. Method to show native datepicker in Chrome
  12. Input value is a string instead of a number
  13. How to do a horizontal scroll on mouse wheel scroll?
  14. Bootstrap 4 Dropdown Menu not working?
  15. How to load images dynamically (or lazily) when users scrolls them into view
  16. Dynamically Populating Drop down list from selection of another drop down value
  17. Pass a javascript variable value into input type hidden value
  18. Best JavaScript solution for client-side form validation and interaction? [closed]
  19. Clearing my form inputs after submission
  20. Highlight the search text – angular 2
  21. Check if element is between 30% and 60% of the viewport
  22. Get HTML code using JavaScript with a URL
  23. Is there any problem with using HTML5’s “data-*” attributes for older browsers?
  24. Disable zoom on input focus in Android webpage
  25. DIV Vertical Scroll bar on left
  26. CSS /JS to prevent dragging of ghost image?
  27. event currentTarget changes after setTimeout
  28. Set Caret Position in ‘contenteditable’ div that has children
  29. JavaScript EventSource SSE not firing in browser
  30. Maximum Call Stack Size Exceeded During a setTimeout Call

Leave a Comment