Load Javascript dynamically with 2 different methods

Question

After spend hours trying to find the best method to import a dynamically JS I came to 2 alternatives. The first one is used by Analytics and many famous JS libraries but the second method is a little smaller and easier to understand, why is it not used by Google Analytics or other major JS libraries?

1)

a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="http://sitepor500.com.br/scripts.js?1";c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c);

2)

a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="http://sitepor500.com.br/scripts.js?2";document.getElementsByTagName("script")[0].parentNode.appendChild(a);

I understand that these 2 methods look almost the same but the first one inserts the script before the first tag in the page and the second method inserts the script as the last nested brother of the first in the page.

As the second method is smaller, easier to understand, why is it not used? Does it have a problem with some particular browser version or brand?

Thanks.

Answer 1

It has nothing to do with browsers, it is all about:

c.parentNode.insertBefore(a,c);

and

c.parentNode.appendChild(a);

the first one is trying to inject a script, before all the other script tags in the page.this part:

document.getElementsByTagName("script")[0]

gets the first script tag in the page, then injects the script tag right before that. Whay is that?, because, the first solution wants to add a script to page and make sure it is the first to execute. but the second solution just want to append a script to page, if you use other libraries like jQuery, bootstarp or whatever, and you have used them in your script, you should use the second solution, because as I said you won't have access to any of other scripts in your page if you use the first solution.

BUT if you change the first method like this:

//...
var scripts=document.body.querySelectorAll("script:last-child");
c=scripts[scripts.length];

now c here is the last script tag in your page, and if you use insertBefore to append your script tag:

c.parentNode.insertBefore(a,c);

it gets inserted before the first script tag in the c DOM level. and it gets executed before the other scripts in the same DOM level. So insertBefore doesn't have anything to do with being the first script tag to be executed and if it is so for your first method, the reason is you are selecting the first script tag in the whole DOM with:

c=document.getElementsByTagName("script")[0]

and inserting your script tag right before that:

c.parentNode.insertBefore(a,c);

Answer 2

First method

parentNode.insertBefore(a,c);

ensures that it will append a DOM object {here : a} at the beginning of specified DOM Object {here : c}. While

parentNode.appendChild(a);

ensures that it will append any DOM object at the end of specified place DOM Object.

So first method ensures that appended scripts will get executed first. For eg : consider a case when subsequent scripts require {here : a} to execute properly.