Home/ Questions/Q 7654687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T12:19:14+00:00

I have a script foo.js that is included in <head> . Inside body I

  • 0

I have a script foo.js that is included in <head>. Inside body I have an inline script. Inside it, I want to add to the document another script for bar.js that will be loaded and evaluated before the inline script.

<html>
  <head>
    <script src="foo.js" type="text/javascript"/>
  </head>
  <body>
    <script type="text/javascript">
      bar()
    </script>
  </body>
</html>

In foo.js I want to add a script pointing to bar.js

bar.js:

function bar() {
  alert('hi');
}

What should be the code of foo.js?

NOTE: I know I can use onload in this trivial example. But in my real case, bar.js contains a function that is called several times and I want to be able to inline these calls in the right sections of the page (for code locality)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have got two options:

    1. Use document.write('<script src="bar.js"></script>') in foo.js.

    2. Dynamically create and insert a <script> element within the head (since scripts in the head have to be loaded before the rest is parsed, this works):

      !function(){
    var s = document.createElement('script'),
        currentScript = document.getElementsByTagName('script')[0];
    s.src = "bar.js";
    currentScript.parentNode.insertBefore(s, currentScript);
}()
    • 0