Executing script elements inserted with innerHTML

Question

I ve got a script that inserts some content into an element using innerHTML   The content could for example be    lt script type  text javascript  gt alert  test    lt  script gt   lt strong gt test lt  strong gt    Problem is that the code inside the  lt script gt  tag doesn t get executed  I googled it a bit but there were no apparent solutions  If I inserted the content using jQuery   element  append content  the script parts got eval d before being injected into the DOM   Has anyone got a snippet of code that executes all the  lt script gt  elements  The jQuery code was a bit complex so I couldn t really figure out how it was done   Edit   By peeking into the jQuery code I ve managed to figure out how jQuery does it  which resulted in the following code   Demo   lt div id  element  gt  lt  div gt    lt script type  text javascript  gt    function insertAndExecute id  text          domelement   document getElementById id       domelement innerHTML   text      var scripts            ret   domelement childNodes      for   var i   0  ret i   i             if   scripts  amp  amp  nodeName  ret i    script     amp  amp    ret i  type    ret i  type toLowerCase        text javascript                   scripts push  ret i  parentNode   ret i  parentNode removeChild  ret i      ret i                          for script in scripts              evalScript scripts script                function nodeName  elem  name         return elem nodeName  amp  amp  elem nodeName toUpperCase       name toUpperCase          function evalScript  elem         data     elem text    elem textContent    elem innerHTML               var head   document getElementsByTagName  head   0     document documentElement      script   document createElement  script        script type    text javascript       script appendChild  document createTextNode  data          head insertBefore  script  head firstChild        head removeChild  script         if   elem parentNode             elem parentNode removeChild  elem                 insertAndExecute  element     lt scri   pt type  text javascript  gt document write  This text should appear as well    lt  scr   ipt gt  lt strong gt this text should also be inserted  lt  strong gt      lt  script gt

User · Answer

Expending the answer of Lambder     document body innerHTML     lt img src     images loaded gif  alt     gt  onload  alert   test    this parentNode removeChild this      gt      You can use base64 image to create and load your script   lt img src  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADUlEQVQYV2P4  8 AwAI AL iF8G4AAAAABJRU5ErkJggg        onload  var script   document createElement  script     script src      yourCustomScript js   parentElement append script      gt    Or if you have a Iframe you can use it instead    lt iframe src    your-orginal-page com  style  width 100  height 100       onload  var script   document createElement  script     script src      your-coustom-script js   parentElement append script        frameborder  0  gt  lt  iframe gt

User · Answer

Simplified ES6 version of  joshcomley s answer with an example   No JQuery  No library  No eval  No DOM change  Just pure Javascript   http   plnkr co edit MMegiu p preview  var setInnerHTML   function elm  html      elm innerHTML   html    Array from elm querySelectorAll  script    forEach  oldScript   gt        const newScript   document createElement  script        Array from oldScript attributes         forEach  attr   gt  newScript setAttribute attr name  attr value         newScript appendChild document createTextNode oldScript innerHTML        oldScript parentNode replaceChild newScript  oldScript             Usage   0 innerHTML   HTML        does  NOT  run  lt script gt  tags in HTML setInnerHTML  0  HTML      does run  lt script gt  tags in HTML

User · Answer

It s easier to use jquery   parent  html code  instead of parent innerHTML   code   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            This also works with scripts that use document write and scripts loaded via src attribute  Unfortunately even this doesn t work with Google AdSense scripts

User · Answer

A solution without using  eval    var setInnerHtml   function elm  html      elm innerHTML   html    var scripts   elm getElementsByTagName  script         If we don t clone the results then  scripts       will actually update live as we insert the new      tags  and we ll get caught in an endless loop   var scriptsClone         for  var i   0  i  lt  scripts length  i          scriptsClone push scripts i          for  var i   0  i  lt  scriptsClone length  i          var currentScript   scriptsClone i       var s   document createElement  script           Copy all the attributes from the original script     for  var j   0  j  lt  currentScript attributes length  j            var a   currentScript attributes j         s setAttribute a name  a value             s appendChild document createTextNode currentScript innerHTML        currentScript parentNode replaceChild s  currentScript           This essentially clones the script tag and then replaces the blocked script tag with the newly generated one  thus allowing execution

User · Answer

The OP s script doesn t work in IE 7  With help from SO  here s a script that does   exec body scripts  function body el         Finds and executes scripts in a newly added element s body       Needed since innerHTML does not run scripts            Argument body el is an element in the dom     function nodeName elem  name        return elem nodeName  amp  amp  elem nodeName toUpperCase                     name toUpperCase            function evalScript elem        var data    elem text    elem textContent    elem innerHTML                  head   document getElementsByTagName  head   0                       document documentElement          script   document createElement  script         script type    text javascript       try            doesn t work on ie          script appendChild document createTextNode data                catch e             IE has funky script nodes       script text   data             head insertBefore script  head firstChild       head removeChild script              main section of function   var scripts             script        children nodes   body el childNodes        child        i     for  i   0  children nodes i   i          child   children nodes i       if  nodeName child   script     amp  amp          child type    child type toLowerCase        text javascript                scripts push child                  for  i   0  scripts i   i          script   scripts i       if  script parentNode   script parentNode removeChild script        evalScript scripts i

User · Answer

Try this snippet   function stripAndExecuteScript text        var scripts           var cleaned   text replace   lt script   gt    gt    s S     lt   script gt  gi  function            scripts    arguments 1      n           return                  if  window execScript           window execScript scripts         else           var head   document getElementsByTagName  head   0           var scriptElement   document createElement  script            scriptElement setAttribute  type    text javascript            scriptElement innerText   scripts          head appendChild scriptElement           head removeChild scriptElement             return cleaned       var scriptString     lt scrip     t   type  text javascript  gt alert   test     lt  scr     ipt gt  lt strong gt test lt  strong gt    document getElementById  element   innerHTML   stripAndExecuteScript scriptString

User · Answer

You may take a look at this post  The code might look like this   var actualDivToBeUpdated   document getElementById  test    var div   document createElement  div    div innerHTML     lt script type  text javascript  gt alert  test    lt   script gt    var children   div childNodes  actualDivToBeUpdated innerHTML       for var i   0  i  lt  children length  i          actualDivToBeUpdated appendChild children i

User · Answer

Here s a shorter  more efficient script that also works for scripts with the src property   function insertAndExecute id  text        document getElementById id  innerHTML   text      var scripts   Array prototype slice call document getElementById id  getElementsByTagName  script         for  var i   0  i  lt  scripts length  i              if  scripts i  src                      var tag   document createElement  script                tag src   scripts i  src              document getElementsByTagName  head   0  appendChild tag                     else               eval scripts i  innerHTML                       Note  whilst eval may cause a security vulnerability if not used properly  it is much faster than creating a script tag on the fly

User · Answer

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

User · Answer

scriptNode innerHTML   code didn t work for IE  The only thing to do is replace with scriptNode text   code and it work fine

User · Answer

Try this  it works for me on Chrome  Safari  amp  Firefox   var script   document createElement  script    script innerHTML    console log  hi     document body appendChild script    -- gt  logs  hi    One thing to note though  is that the following div-nested script will NOT run   var script   document createElement  div    script innerHTML     lt script gt console log  hi   lt  script gt    document body appendChild script   -- gt  doesn t log anything   For a script to run it has to be created as a node then appended as a child  You can even append a script inside a previously injected div  amp  it will run  I ve run into this before when trying to get ad server code to work    var div   document createElement  div    div id    test-id   document body appendChild div   var script   document createElement  script    script innerHTML    console log  hi     document getElementById  test-id   appendChild script   -- gt  logs  hi

User · Answer

I needed something similar  but needed the script to remain or be re-created in the same spot as the original script  since my script targets the location of the script tag in the DOM to create target elements  I also made the script recursive to make sure it also works if it is more than one level down   NOTE  I use const here  if you have a older browser  just use var       window exec body scripts   function body el               ref  https   stackoverflow com questions 2592092 executing-script-elements-inserted-with-innerhtml based on Larry K s answer            Finds and executes scripts in a newly added element s body             Needed since innerHTML does not run scripts                        Argument body el is an element in the dom          const             type  Js    text javascript               tagName  Script    script               tagName  Script  Upper   tagName  Script toUpperCase            var scripts       script  i          function evalScript elem                var parent   elem parentNode                  data    elem text    elem textContent    elem innerHTML                         script   document createElement tagName  Script                script type   type  Js              try                      doesn t work on ie                    script appendChild document createTextNode data                  catch  e                       IE has funky script nodes                 script text   data                               Make sure to re-insert the script at the same position                to make sure scripts that target their position                in the DOM function as expected              var parent   elem parentNode              parent insertBefore script  elem               parent removeChild elem                         Get all scripts  recursive          if  typeof  document querySelectorAll      typeof  void 0                 document querySelectorAll  script   forEach  scr    gt    if   scr type    scr type toLowerCase       type  Js  scripts push scr                         else               var children nodes   body el childNodes  child              for  i   0  children nodes i   i                      child   children nodes i                   if                       child nodeName                      amp  amp                      child nodeName toUpperCase       tagName  Script  Upper                      amp  amp                                                 child type                                                    child type toLowerCase       type  Js                                                               scripts push child                                        Recursive call                 window exec body scripts child                                   for  i   0  scripts i   i                  evalScript scripts i

User · Answer

Thanks to Larry s script  which worked perfectly well in IE10  this is what I ve used           id  0  innerHTML   result          id     script   each function     this text   this text      this  text

User · Answer

function insertHtml id  html           var ele   document getElementById id        ele innerHTML   html       var codes   ele getElementsByTagName  script          for var i 0 i lt codes length i                    eval codes i  text                  It works in Chrome in my project

User · Answer

Try function eval     data newScript     lt script type  text javascript  gt   my script    lt  script gt   var element   document getElementById  elementToRefresh    element innerHTML   data newScript  eval element firstChild innerHTML     This is a real example from a project that i am developing  Thanks to this post

User · Answer

Made this new helper function in TypeScript  maybe someone will appreciate it  If you remove type declaration from script parameter it will just be plain JS   x000D   x000D  const evalPageScripts        gt      const scripts   document querySelectorAll  script       scripts forEach  script  HTMLScriptElement    gt        const newScript   document createElement  script        newScript type    text javascript       newScript src   script src       if  script parentNode          script parentNode removeChild script              return document body appendChild newScript            export default evalPageScripts  x000D   x000D   x000D

User · Answer

Here is my solution in a recent project    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

Just do   document body innerHTML   document body innerHTML     lt img src     images loaded gif  alt    onload  alert   test    this parentNode removeChild this      gt

User · Answer

You should not use the innerHTML property but rather the appendChild method of the Node  a node in a document tree   HTML DOM   This way you are able to later call your injected code  Make sure that you understand that node innerHTML is not the same as node appendChild  You might want to spend some time on the Javascript Client Reference for more details and the DOM   Hope the following helps    Sample injection works   x000D   x000D   lt  DOCTYPE HTML gt   lt html gt   lt head gt       lt title gt test lt  title gt       lt script language  javascript  type  text javascript  gt          function doOnLoad                 addScript  inject   function foo    alert  injected                                function addScript inject code                var  in   document getElementById  inject                var scriptNode   document createElement  script                scriptNode innerHTML   code               in appendChild scriptNode                  lt  script gt   lt  head gt   lt body onload  doOnLoad     gt       lt div id  header  gt some content lt  div gt       lt div id  inject  gt  lt  div gt       lt input type  button  onclick  foo    return false   value  Test Injected    gt   lt  body gt   lt  html gt  x000D   x000D   x000D   regards

User · Answer

Extending off of Larry s   I made it recursively search the entire block and children nodes  The script now will also call external scripts that are specified with src parameter  Scripts are appended to the head instead of inserted and placed in the order they are found  So specifically order scripts are preserved   And each script is executed synchronously similar to how the browser handles the initial DOM loading   So if you have a script block that calls jQuery from a CDN and than the next script node uses jQuery    No prob   Oh and I tagged the appended scripts with a serialized id based off of what you set in the tag parameter so you can find what was added by this script   exec body scripts  function body el  tag           Finds and executes scripts in a newly added element s body         Needed since innerHTML does not run scripts                Argument body el is an element in the dom       function nodeName elem  name            return elem nodeName  amp  amp  elem nodeName toUpperCase                     name toUpperCase                function evalScript elem  id  callback            var data    elem text    elem textContent    elem innerHTML                      head   document getElementsByTagName  head   0                           document documentElement           var script   document createElement  script            script type    text javascript           if  id                      script setAttribute  id   id                      if  elem src                      script src   elem src              head appendChild script                  Then bind the event to the callback function                 There are several events for cross browser compatibility              script onreadystatechange   callback              script onload   callback            else               try                      doesn t work on ie                    script appendChild document createTextNode data                        catch e                       IE has funky script nodes                 script text   data                            head appendChild script               callback                          function walk children node            var scripts                 script            children nodes   node childNodes            child            i           if  children nodes     undefined  return           for  i   0  i lt children nodes length  i                  child   children nodes i               if  nodeName child   script     amp  amp                    child type    child type toLowerCase        text javascript                      scripts push child                 else                   var new scripts   walk children child                   for j 0  j lt new scripts length  j                          scripts push new scripts j                                                       return scripts             var i   0      function execute script i            script   scripts i           if  script parentNode   script parentNode removeChild script            evalScript scripts i   tag     i  function                 if  i  lt  scripts length-1                    execute script   i                                                           main section of function     if  tag     undefined  tag    tmp        var scripts   walk children body el        execute script i

[javascript] Executing <script> elements inserted with .innerHTML

Examples related to javascript

Examples related to dom

Examples related to eval

Examples related to innerhtml