Can scripts be inserted with innerHTML

Question

I tried to load some scripts into a page using innerHTML on a  lt div gt   It appears that the script loads into the DOM  but it is never executed  at least in Firefox and Chrome   Is there a way to have scripts execute when inserting them with innerHTML   Sample code    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt body onload  document getElementById  loader   innerHTML     lt script gt alert   hi    lt   script gt    gt  x000D      Shouldn t an alert saying  hi  appear  x000D       lt div id  loader  gt  lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Krasimir Tsonev has a great solution that overcome all problems. His method doesn't need using eval, so no performance nor security problems exist. It allows you to set innerHTML string contains html with js and translate it immediately to an DOM element while also executes the js parts exist along the code. short ,simple, and works exactly as you want.

Enjoy his solution:

http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element

Important notes:

You need to wrap the target element with div tag
You need to wrap the src string with div tag.
If you write the src string directly and it includes js parts, please take attention to write the closing script tags correctly (with \ before /) as this is a string.

User · Answer

Here is a very interesting solution to your problem  http   24ways org 2005 have-your-dom-and-script-it-too  So use this instead of script tags    lt img src  empty gif  onload  alert  test   this parentNode removeChild this      gt

User · Answer

For anyone still trying to do this  no  you can t inject a script using innerHTML  but it is possible to load a string into a script tag using a Blob and URL createObjectURL   I ve created an example that lets you run a string as a script and get the  exports  of the script returned through a promise   function loadScript scriptContent  moduleId           create the script tag     var scriptElement   document createElement  SCRIPT            create a promise which will resolve to the script s  exports          i e   the value returned by the script      var promise   new Promise function resolve            scriptElement onload   function                 var exports   window    loadScript exports     moduleId               delete window    loadScript exports     moduleId               resolve exports                             wrap the script contents to expose exports through a special property        the promise will access the exports this way     var wrappedScriptContent             function     window    loadScript exports     moduleId                      scriptContent                   create a blob from the wrapped script content     var scriptBlob   new Blob  wrappedScriptContent    type   text javascript             set the id attribute     scriptElement id      loadScript module     moduleId          set the src attribute to the blob s object url          this is the part that makes it work      scriptElement src   URL createObjectURL scriptBlob           append the script element     document body appendChild scriptElement           return the promise  which will resolve to the script s exports     return promise          function doTheThing            no evals     loadScript  5   5   then function exports                should log 10         console log exports              I ve simplified this from my actual implementation  so no promises that there aren t any bugs in it  But the principle works   If you don t care about getting any value back after the script runs  it s even easier  just leave out the Promise and onload bits  You don t even need to wrap the script or create the global window   load script exports  property

User · Answer

For me the best way is to insert the new HTML content through innerHtml and then use  setTimeout      gt            var script el   document createElement  script           script el src    script-to-add js          document body appendChild script el         500    The setTimeout is not required but it works better  This worked for me

User · Answer

I do this every time I wanna insert a script tag dynamically     const html         lt script gt          alert   there   Wanna grab a           lt  script gt       const scriptEl   document createRange   createContextualFragment html     parent append scriptEl    NOTE  ES6 used EDIT 1  Clarification for you guys - I ve seen a lot of answers use appendChild and wanted to let you guys know that it works exactly as append

User · Answer

You have to use eval   to execute any script code that you ve inserted as DOM text   MooTools will do this for you automatically  and I m sure jQuery would as well  depending on the version  jQuery version 1 6  uses eval    This saves a lot of hassle of parsing out  lt script gt  tags and escaping your content  as well as a bunch of other  gotchas    Generally if you re going to eval   it yourself  you want to create send the script code without any HTML markup such as  lt script gt   as these will not eval   properly

User · Answer

Use   parent  html code  instead of parent innerHTML   code   The following also fixes scripts that use document write and scripts loaded via src attribute  Unfortunately even this doesn t work with Google AdSense scripts   var oldDocumentWrite   document write  var oldDocumentWriteln   document writeln  try       document write   function code              parent  append code             document writeln   function code            document write code     lt br  gt                 parent  html html      finally         window  load function             document write   oldDocumentWrite         document writeln   oldDocumentWriteln            Source

User · Answer

Yes you can  but you have to do it outside of the DOM and the order has to be right   var scr     lt scr   ipt gt alert  foo   lt  scr   ipt gt    window onload   function        var n   document createElement  div        n innerHTML   scr      document body appendChild n          will alert  foo   This won t work   document getElementById  myDiv   innerHTML   scr    And even this won t work  because the node is inserted first   var scr     lt scr   ipt gt alert  foo   lt  scr   ipt gt    window onload   function        var n   document createElement  div        document body appendChild n       n innerHTML   scr

User · Answer

Execute   Java Script  tag from innerHTML  Replace your script element with div having a class attribute class  javascript  and close it with  lt  div gt   Don t change the content that you want to execute  previously it was in script tag and now it is in div tag      Add a style in your page      lt style type  text css  gt   javascript   display  none     lt  style gt   Now run  eval using jquery Jquery js should be already included          javascript   each function           eval   this  text                 You can explore more here  at my blog

User · Answer

Here is a method that recursively replaces all scripts with executable ones  function nodeScriptReplace node            if   nodeScriptIs node      true                     node parentNode replaceChild  nodeScriptClone node    node                      else                   var i   -1  children   node childNodes                  while     i  lt  children length                           nodeScriptReplace  children i                                          return node    function nodeScriptClone node           var script    document createElement  quot script quot            script text   node innerHTML           var i   -1  attrs   node attributes  attr          while     i  lt  attrs length                                                       script setAttribute   attr   attrs i   name  attr value                      return script     function nodeScriptIs node            return node tagName      SCRIPT      Example call  nodeScriptReplace document getElementsByTagName  quot body quot   0

User · Answer

You can also wrap your  lt script gt  like this and it will get executed    lt your target node gt  innerHTML     lt iframe srcdoc   lt script gt alert top document title   lt  script gt   gt  lt  iframe gt      Please note  The scope inside srcdoc refers to the iframe  so you have to use top like in the example above to access the parent document

User · Answer

Here a solution that does not use eval  and works with scripts  linked scripts   as well as with modules    The function accepts 3 parameters     html   String with the html code to insert dest   reference to the target element append   boolean flag to enable appending at the end of the target element html   function insertHTML html  dest  append false          if no append is requested  clear the target element     if  append  dest innerHTML              create a temporary container and insert provided HTML code     let container   document createElement  div        container innerHTML   html         cache a reference to all the scripts in the container     let scripts   container querySelectorAll  script           get all child elements and clone them in the target element     let nodes   container childNodes      for  let i 0  i lt  nodes length  i    dest appendChild  nodes i  cloneNode true            force the found scripts to execute        for  let i 0  i lt  scripts length  i             let script   document createElement  script            script type   scripts i  type     text javascript           if  scripts i  hasAttribute  src     script src   scripts i  src          script innerHTML   scripts i  innerHTML          document head appendChild script           document head removeChild script                done      return true

User · Answer

You could do it like this   var mydiv   document getElementById  mydiv    var content     lt script gt alert   hi     lt   script gt     mydiv innerHTML   content  var scripts   mydiv getElementsByTagName  script    for  var i   0  i  lt  scripts length  i          eval scripts i  innerText

User · Answer

I used this code  it is working fine  var arr   MyDiv getElementsByTagName  script   for  var n   0  n  lt  arr length  n        eval arr n  innerHTML   run script inside div

User · Answer

My solution for this problem is to set a Mutation Observer to detect  lt script gt  lt  script gt  nodes and then replace it with a new  lt script gt  lt  script gt  node with the same src  For example   let parentNode      node to observe    void 0 let observer   new MutationObserver mutations  gt       mutations map mutation  gt           Array from mutation addedNodes  map node  gt               if   node parentNode    parentNode                     let scripts   node getElementsByTagName  script                   Array from scripts  map script  gt                       let src   script src                     script   document createElement  script                       script src   src                     return script                                                       observer observe document body   childList  true  subtree  true

User · Answer

I had this problem with innerHTML  I had to append a Hotjar script to the  head  tag of my Reactjs application and it would have to execute right after appending   One of the good solutions for dynamic Node import into the  head  tag is React-helment module     Also  there is a useful solution for the proposed issue   No script tags in innerHTML   It turns out that HTML5 does not allow script tags to be dynamically added using the innerHTML property  So the following will not execute and there will be no alert saying Hello World   element innerHTML     lt script gt alert  Hello World    lt  script gt      This is documented in the HTML5 spec      Note  script elements inserted using innerHTML do not execute when   they are inserted    But beware  this doesn t mean innerHTML is safe from cross-site scripting  It is possible to execute JavaScript via innerHTML without using  tags as illustrated on MDN s innerHTML page   Solution  Dynamically adding scripts  To dynamically add a script tag  you need to create a new script element and append it to the target element   You can do this for external scripts   var newScript   document createElement  script    newScript src    http   www example com my-script js   target appendChild newScript     And inline scripts   var newScript   document createElement  script    var inlineScript   document createTextNode  alert  Hello World        newScript appendChild inlineScript    target appendChild newScript

User · Answer

Gabriel Garcia s mention of MutationObservers is on the right track  but didn t quite work for me  I am not sure if that was because of a browser quirk or due to a mistake on my end  but the version that ended up working for me was the following   document addEventListener  DOMContentLoaded   function event        var observer   new MutationObserver mutations  gt           mutations map mutation  gt               Array from mutation addedNodes  map node  gt                   if  node tagName      SCRIPT                         var s   document createElement  script                        s text node text                      if  typeof node parentElement added       undefined                           node parentElement added                           node parentElement added node parentElement added length    s                      node parentElement removeChild node                       document head appendChild s                                                          observer observe document getElementById  element to watch     childList  true  subtree  true attributes  false         Of course  you should replace element to watch with the name of the element that is being modified   node parentElement added is used to store the script tags that are added to document head  In the function used to load the external page  you can use something like the following to remove no longer relevant script tags   function freeScripts node       if  node     null          return      if  typeof node added       object             for  var script in node added                document head removeChild node added script                      node added                 for  var child in node children            freeScripts node children child              And an example of the beginning of a load function   function load url  id  replace        if  document getElementById id      null            console error  Element of ID   id     does not exist             return            freeScripts document getElementById id        var xhttp   new XMLHttpRequest           proceed to load in the page and modify innerHTML

User · Answer

You can create script and then inject the content    var g   document createElement  script    var s   document getElementsByTagName  script   0   g text    alert   hi      s parentNode insertBefore g  s     This works in all browsers

User · Answer

Try using template and document importNode  Here is an example    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta charset  UTF-8  gt  x000D   lt title gt Sample lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt h1 id  hello world  gt Sample lt  h1 gt  x000D   lt script type  text javascript  gt  x000D   var div   document createElement  div    x000D    var t   document createElement  template    x000D    t innerHTML     Check Console tab for javascript output  Hello world    lt br  gt  lt script type  text javascript   gt console log  Hello world       lt   script gt    x000D     x000D    for  var i 0  i  lt  t content childNodes length  i     x000D      var node   document importNode t content childNodes i   true   x000D      div appendChild node   x000D      x000D   document body appendChild div   x000D   lt  script gt  x000D    x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Filter your script tags and run each of them with eval var tmp   document createElement  div    tmp innerHTML     lt script gt alert  quot hello quot   gt  lt  script gt        tmp children  filter x   gt  x nodeName      SCRIPT   forEach x   gt  eval x innerText

User · Answer

Building up on Danny  365CSI  Engelman s comment  here is an universal solution   lt script gt    alert  quot This script always runs  quot      script01   true   lt  script gt   lt img src  quot data image gif base64 R0lGODlhAQABAIAAAAAAAP   yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 quot   onload  quot if typeof script01    undefined   eval this previousElementSibling innerHTML  quot  gt   Use this as innerHTML  i e  loaded by XMLHttpRequest  or directly  i e  inserted by PHP backend   the script always loads once  Explanation  script loaded as innerHTML is not executed  but onload content atribute is  If the script was not executed  added as innerHTML  then the script is executed in image onload event  If the script was loaded  added by backend  then script01 variable is defined and onload will not run the script for the second time

User · Answer

Here is a recursive function to set the innerHTML of an element that I use in our ad server      o  container to set the innerHTML    html  html text to set     clear  if true  the container is cleared first  children removed  function setHTML o  html  clear        if  clear  o innerHTML               Generate a parseable object with the html      var dv   document createElement  div        dv innerHTML   html          Handle edge case where innerHTML contains no tags  just text      if  dv children length   0   o innerHTML   html  return         for  var i   0  i  lt  dv children length  i              var c   dv children i               n  new node with the same type as c         var n   document createElement c nodeName               copy all attributes from c to n         for  var j   0  j  lt  c attributes length  j                n setAttribute c attributes j  nodeName  c attributes j  nodeValue               If current node is a leaf  just copy the appropriate property  text or innerHTML          if  c children length    0                        switch  c nodeName                                case  SCRIPT                       if  c text  n text   c text                      break                  default                      if  c innerHTML  n innerHTML   c innerHTML                      break                                     If current node has sub nodes  call itself recursively          else setHTML n  c innerHTML  false           o appendChild n             You can see the demo here

[javascript] Can scripts be inserted with innerHTML?

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to innerhtml