Can t append script element

Question

Any idea why the piece of code below does not add the script element to the DOM   var code     lt script gt  lt  script gt        someElement   append code

User · Answer

I wrote an npm package that lets you take an HTML string  including script tags and append it to a container while executing the scripts  Example   import appendHtml from  appendhtml    const html     lt p gt Hello lt  p gt  lt script src  some js file js  gt  lt  script gt     const container   document getElementById  some-div     await appendHtml html  container       appendHtml returns a Promise  some js file js is now loaded and executed  note the await    Find it here  https   www npmjs com package appendhtml

User · Answer

Can try like this  var code     lt script gt  lt       script gt        someElement   append code     The only reason you can t do   lt script gt  lt  script gt   is because the string  isn t allowed inside javascript because the DOM layer can t parse what s js and what s HTML

User · Answer

I ve seen issues where some browsers don t respect some changes when you do them directly  by which I mean creating the HTML from text like you re trying with the script tag   but when you do them with built-in commands things go better   Try this   var script   document createElement   script     script type    text javascript   script src   url      someElement   append  script      From  JSON for jQuery

User · Answer

It is possible to dynamically load a JavaScript file using the jQuery function getScript     getScript  http   www whatever com shareprice shareprice js   function       Display sharePrice          Now the external script will be called  and if it cannot be loaded it will gracefully degrade

User · Answer

Another way you can do it if you want to append code is using the document createElement method but then using  innerHTML instead of  src   var script   document createElement   script     script type    text javascript   script innerHTML    alert  Hey there    you just appended this script to the body         body   append  script

User · Answer

Just create an element by parsing it with jQuery    lt div id  someElement  gt  lt  div gt   lt script gt      var code     lt script gt alert 123   lt   script gt            someElement   append   code     lt  script gt    Working example  https   plnkr co edit V2FE28Q2eBrJoJ6PUEBz

User · Answer

Append script to body     document  ready function             lt script gt       src    bootstrap min js    type    text javascript     appendTo  body

User · Answer

Your script is executing   you just can t use document write from it  Use an alert to test it and avoid using document write  The statements of your js file with document write will not be executed and the rest of the function will be executed

User · Answer

This is what I think is the best solution  Google Analytics is injected this way   var  function        var p  https      document location protocol    https        http              d document          g d createElement  script            s d getElementsByTagName  script   0           g type  text javascript           g src p  url-to-your-script js           s parentNode insertBefore g s

User · Answer

Adding the sourceURL in the script file helped as mentioned in this page  https   blog getfirebug com 2009 08 11 give-your-eval-a-name-with-sourceurl    In the script file  add a statement with sourceURL like      sourceURL foo js  Load the script using jQuery   getScript   and the script will be available in  sources  tab in chrome dev tools

User · Answer

I want to do the same thing but to append a script tag in other frame   var url    library js    var script   window parent frames 1  document createElement  script      script type    text javascript    script src   url     head  window parent frames 1  document  append script

User · Answer

This works      body   append     lt script gt alert  Hi     lt   script gt    0      It seems like jQuery is doing something clever with scripts so you need to append the html element rather than jQuery object

User · Answer

The Good News is   It s 100  working   Just add something inside the script tag such as alert  voila      The right question you might want to ask perhaps   Why didn t I see it in the DOM     Karl Swedberg has made a nice explanation to visitor s comment in jQuery API site  I don t want to repeat all his words  you can read directly there here  I found it hard to navigate through the comments there       All of jQuery s insertion methods use   a domManip function internally to   clean process elements before and   after they are inserted into the DOM    One of the things the domManip   function does is pull out any script   elements about to be inserted and run   them through an  evalScript routine    rather than inject them with the rest   of the DOM fragment  It inserts the   scripts separately  evaluates them    and then removes them from the DOM       I believe that one of the reasons jQuery   does this is to avoid  Permission   Denied  errors that can occur in   Internet Explorer when inserting   scripts under certain circumstances    It also avoids repeatedly   inserting evaluating the same script    which could potentially cause   problems  if it is within a containing   element that you are inserting and   then moving around the DOM    The next thing is  I ll summarize what s the bad news by using  append   function to add a script     And The Bad News is    You can t debug your code   I m not joking  even if you add debugger  keyword between the line you want to set as breakpoint  you ll be end up getting only the call stack of the object without seeing the breakpoint on the source code   not to mention that this keyword only works in webkit browser  all other major browsers seems to omit this keyword    If you fully understand what your code does  than this will be a minor drawback  But if you don t  you will end up adding a debugger  keyword all over the place just to find out what s wrong with your  or my  code  Anyway  there s an alternative  don t forget that javascript can natively manipulate HTML DOM      Workaround   Use javascript  not jQuery  to manipulate HTML DOM  If you don t want to lose debugging capability  than you can use javascript native HTML DOM manipulation  Consider this example   var script     document createElement  script    script type     text javascript   script src      path to your javascript js         use this for linked script script text     alert  voila                       use this for inline script document body appendChild script     There it is  just like the old days isn t it  And don t forget to clean things up whether in the DOM or in the memory for all object that s referenced and not needed anymore to prevent memory leaks  You can consider this code to clean things up   document body removechild document body lastChild   delete UnusedReferencedObjects     replace UnusedReferencedObject with any object you created in the script you load    The drawback from this workaround is that you may accidentally add a duplicate script  and that s bad  From here you can slightly mimic  append   function by adding an object verification before adding  and removing the script from the DOM right after it was added  Consider this example   function AddScript url  object       if  object    null              add script         var script     document createElement  script            script type     text javascript           script src      path to your javascript js           document body appendChild script               remove from the dom         document body removeChild document body lastChild           return true        else           return false             function DeleteObject UnusedReferencedObjects        delete UnusedReferencedObjects      This way  you can add script with debugging capability while safe from script duplicity  This is just a prototype  you can expand for whatever you want it to be  I have been using this approach and quite satisfied with this  Sure enough I will never use jQuery  append   to add a script

User · Answer

Try this may be helpful    var fileref document createElement  script    fileref setAttribute  type   text javascript    fileref setAttribute  src   scriptAnalytics js    document getElementsByTagName  head   0  appendChild fileref

User · Answer

What do you mean  not working    jQuery detects that you re trying to create a SCRIPT element and will automatically run the contents of the element within the global context  Are you telling me that this doesn t work for you  -      someElement   append   lt script gt alert  WORKING    lt  script gt         Edit  If you re not seeing the SCRIPT element in the DOM  in Firebug for example  after you run the command that s because jQuery  like I said  will run the code and then will delete the SCRIPT element - I believe that SCRIPT elements are always appended to the body    but anyway - placement has absolutely no bearing on code execution in this situation

User · Answer

You don t need jQuery to create a Script DOM Element  It can be done with vanilla ES6 like so   const script    console log  Did it work     new Promise  resolve  reject    gt       function i s o g r a m         a s createElement o  m s getElementsByTagName o  0         a innerText g        a onload r m parentNode insertBefore a m       window document  script  script  resolve       then      gt  console log  Sure did       It doesn t need to be wrapped in a Promise  but doing so allows you to resolve the promise when the script loads  helping prevent race conditions for long-running scripts

User · Answer

I tried this one and works fine  Just replace the  lt  symbol with that  x3C       With Variable var code     x3Cscript gt SomeCode x3C script gt        someElement   append code     or      Without Variable     someElement   append   x3Cscript gt SomeCode x3C script gt       You can test the code here

User · Answer

lt script gt                 jQuery   lt script gt  lt  script gt                lt  script gt    The  lt  script gt  within the string literal terminates the entire script  to avoid that   lt  scr     ipt gt   can be used instead

[javascript] Can't append <script> element

Examples related to javascript

Examples related to jquery