What is the difference between this code

      var head=document.getElementsByTagName('head')[0]
      var script=document.createElement('script')
       script.setAttribute('type', 'text/javascript')
       script.setAttribute('src', ".js")
       head.appendChild(script)

and this code

      <script type="text/javascript" src=".js">  

      </script> 

Thank you.

What is the difference between this code

      var head=document.getElementsByTagName('head')[0]
      var script=document.createElement('script')
       script.setAttribute('type', 'text/javascript')
       script.setAttribute('src', "http://your-script./address-here.js")
       head.appendChild(script)

and this code

      <script type="text/javascript" src="http://your-script./address-here.js">  

      </script> 

Thank you.

• javascript

• 2 The latter can be created by the first? One is hard-coded in the HTML and the other is dynamically created..? What's the point of your question? Is there something specific about the two that you don't understand? – David Thomas Commented Dec 3, 2012 at 20:28
• 1 Well I saw in some codes that the programmer use this two options so i dont understand why to use both of them and not only one – user1801625 Commented Dec 3, 2012 at 20:29

4 Answers 4

The javascript at the top is going to append a new element to the first head tag of the document that should equal out to <script type="text/javascript" src="http://your-script./address-here"></script> (or close to). The only difference is that the browser will load the HTML version as soon as it es across it whereas the JS won't be loaded until the element is done being appended.

As @lostsource mentions this would be typically used to load a dependency script or used to bring in polyfills, e.g. if(!someJSFeatureIWant) {//import the script here}.

The first one is normally used as a way to include additional Javascript files required by a Script. (it is just dynamically creating a <script> tag like the second code sample)

For example you might include the core functionality in a main.js file, then depending on user interactivity you decide to include other scripts. (eg. graphics.js, forms.js etc..)

The same approach is also used to make JSON-P requests by dynamically including a url which returns a JSON 'padded' response. With the main advantage over iframes and regular XHR requests being that <script> tags are not affected by the same origin policy.

One is JavaScript and will add a script to the DOM after it has been created. The other is HTML and will add a script to the DOM while it is being created.

Essentially, both load a js file, but the first sample effectively creates the other on demand.

var head=document.getElementsByTagName('head')[0]
var script=document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', "http://your-script./address-here.js")
head.appendChild(script)

You would generally use this for loading external code into a page on the run (after it is created). This specific syntax used in the example also pollutes the global scope and should not be used as is.

<script type="text/javascript" src="http://your-script./address-here.js">  
</script>

This is the natural HTML syntax for loading script files. If the page code is under your control, you have no reason to ever use anything other than this unless in special circumstances that demand it or for optimisation purposes.