How to add DOM element script to head section

Question

I want to add DOM element to head section of HTML  jQuery does not allow adding DOM element script to the head section and they execute instead  Reference    I want to add script tags and write a script within  lt head gt  section   var script     lt script type  text javascript  gt    function  lt  script gt      head   append script     Something like this with functions  I tried jQuery and javascript   but it does not work   Please tell me how to add and write script to head by jQuery or javascript   I tired the javascript to add DOM element  but it does not work with  innerHTML   to write to head  I am using jQuery 2 0 3 and jQuery UI 1 10 3   I want to add base64 encoded script to head section  I use base64 decoder js like this to decode the javascript and then put on the head section     Edited It will be     getScript  base64 js    var encoded    YWxlcnQoImhpIik7DQo      More text var decoded   decodeString encoded   var script     lt script type  text javascript  gt    decoded     lt  script gt       head   append script     To fit an encoded script and the addition in one javascript file   I want to use base64 js or some other decoder javascript files for browsers does not accept atob

User · Answer

Here is a safe and reusable function for adding script to head section if its not already exist there.

see working example here: Example

<!DOCTYPE html>
<html>
  <head>
    <base href="/"/>
    <style>
    </style>
  </head>
  <body>
    <input type="button" id="" style='width:250px;height:50px;font-size:1.5em;' value="Add Script" onClick="addScript('myscript')"/>
    <script>
      function addScript(filename)
      {
        // house-keeping: if script is allready exist do nothing
        if(document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
        {
          alert("script is allready exist in head tag!")
        }
        else
        {
          // add the script
          loadScript('/',filename + ".js");
        }
      }
      function loadScript(baseurl,filename)
      {
        var node = document.createElement('script');
        node.src = baseurl + filename;
        document.getElementsByTagName('head')[0].appendChild(node);
        alert("script added");
      }
    </script>
  </body>
</html>

User · Answer

var script       lt script type  text javascript  gt    function  lt  script gt    document getElementsByTagName  head   0  appendChild script 0     But in that case script will not be executed and functions will be not accessible in global namespase  To use code in  lt script gt  you need do as in you question     head   append script

User · Answer

This is an old question  and I know its asking specifically about adding a script tag into the head  however based on the OPs explanation they actually just intend to execute some JS code which has been obtained via some other JS function   This is much simpler than adding a script tag into the page   Simply   eval decoded     Eval will execute a string of JS in-line  without any need to add it to the DOM at all   I don t think there s ever really a need to add an in-line script tag to the DOM after page load   More info here  http   www w3schools com jsref jsref eval asp

User · Answer

Best solution I ve found  AppendToHead  script    alert  quot hii quot          or AppendToHead  script    http   example com script js      or AppendToHead  style      myDiv color red         or AppendToHead  style     http   example com style css       function AppendToHead elemntType  content          detect whether provided content is  quot link quot   instead of inline codes      var Is Link   content split   r n  r  n   length  lt   1   amp  amp   content indexOf  quot    quot    gt  -1  amp  amp  content indexOf  quot   quot   lt  -1      if Is Link           if  elemntType   script        var x document createElement  script   x id id   x src content   x type  text javascript             else if  elemntType   style    var x document createElement  link     x id id   x href content  x type  text css    x rel    stylesheet               else          var x   document createElement elemntType           if  elemntType   script        x type  text javascript      x innerHTML   content             else if  elemntType   style    x type  text css      if  x styleSheet   x styleSheet cssText content    else   x appendChild document createTextNode content                      append in head      document head    document getElementsByTagName  head   0   appendChild x

User · Answer

lt script type  text JavaScript  gt       var script   document createElement  SCRIPT        script src    YOURJAVASCRIPTURL       document getElementsByTagName  HEAD   0  appendChild script     lt  script gt

User · Answer

you could do   var scriptTag   document createElement  script    scriptTag type    text javascript   scriptTag src    script source here    document getElementsByTagName  head   0     document documentElement   appendChild scriptTag

User · Answer

If injecting multiple script tags in the head like this with mix of local and remote script files a situation may arise where the local scripts that are dependent on external scripts  such as loading jQuery from googleapis  will have errors because the external scripts may not be loaded before the local ones are   So something like this would have a problem    jQuery is not defined  in jquery some-plugin js    var head   document getElementsByTagName  head   0    var script   document createElement  script    script type    text javascript   script src    https   ajax googleapis com ajax libs jquery 2 2 4 jquery min js   head appendChild script    var script   document createElement  script    script type    text javascript   script src     jquery some-plugin js   head appendChild script     Of course this situation is what the  onload   is for  but if multiple scripts are being loaded that can be cumbersome   As a resolution to this situation  I put together this function that will keep a queue of scripts to be loaded  loading each subsequent item after the previous finishes  and returns a Promise that resolves when the script  or the last script in the queue if no parameter  is done loading   load script   function src           Initialize scripts queue     if  load script scripts     undefined             load script scripts               load script index   -1          load script loading   false          load script next   function                 if  load script loading   return                  Load the next queue item             load script loading   true              var item   load script scripts   load script index               var head   document getElementsByTagName  head   0               var script   document createElement  script                script type    text javascript               script src   item src                 When complete  start next item in queue and resolve this item s promise             script onload        gt                    load script loading   false                  if  load script index  lt  load script scripts length - 1   load script next                    item resolve                               head appendChild script                             Adding a script to the queue     if  src                Check if already added         for var i 0  i  lt  load script scripts length  i                  if  load script scripts i  src    src   return load script scripts i  promise                       Add to the queue         var item     src  src            item promise   new Promise resolve   gt   item resolve   resolve             load script scripts push item           load script next                  Return the promise of the last queue item     return load script scripts  load script scripts length - 1   promise       With this adding scripts in order ensuring the previous are done before staring the next can be done like       https   ajax googleapis com ajax libs jquery 2 2 4 jquery min js      jquery some-plugin js      dependant-on-plugin js     forEach load script     Or load the script and use the return Promise to do work when it s complete     load script  some-script js    then function            some-script js is done loading

User · Answer

As per the author  they want to create a script in the head  not a link to a script file  Also  to avoid complications from jQuery  which provides little useful functionality in this case   vanilla javascript is likely the better option  That may possibly be done as such  var script   document createTextNode  quot  lt script gt alert  Hi     lt  script gt  quot       document getElementsByTagName  head   0  appendChild script

User · Answer

try this  var script   document createElement  script    script type    text javascript   script src    url        document getElementsByTagName  head   0  appendChild script

User · Answer

I use PHP as my serverside language  so the example i will write in it - but i m sure there is a method in your server side as well   Just have your serverside language add it from a variable  w  php something like that would go as follows   Do note  that this will only work if the script is loaded with the page load  If you want to load it dynamically  this solution will not help you   PHP        HTML   lt head gt       lt script type  text javascript  gt   lt  php echo  decodedstring   gt   lt  script gt   lt  head gt    In Summary  Decode with serverside and put it in your HTML using the server language

User · Answer

For modern browsers  the best solution is to use Promises  Go to https   stackoverflow com a 63936671 13720928 to find out more

User · Answer

try out     x000D   x000D  var script   document createElement  script    x000D  script type  text javascript   x000D  script innerHTML  alert  Hi       x000D  document getElementsByTagName  head   0  appendChild script   x000D   x000D   x000D

[javascript] How to add DOM element script to head section?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dom