在JS文件中加载另一个JS文件的教程

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

这篇文章介绍了在HTML文档的不同位置加载JavaScript代码的五种常见方法： 1. **加载在头部**：通过`head`标签或`document.documentElement`插入到HTML文档的顶部，这种方法确保脚本在其他脚本之前执行，且不会在`body`元素之前插入。 2. **加载在BODY中**：通过`document.body.appendChild(js)`将脚本插入到页面内容中，但存在脚本可能在`head`区域的问题，可能导致`document.body`不存在。 3. **使用`documentElement`**：通过`document.documentElement`明确指定HTML文档，确保脚本安全加载，不会因页面布局问题导致脚本缺失。 4. **加载在第一个脚本前**：通过查找`script`标签并插入在其父节点，确保当前脚本在所有其他脚本之前执行，除非页面中没有其他脚本。 5. **加载在当前脚本之前或之后**：通过查找当前脚本的`script`标签并插入在其父节点前或后，控制脚本加载顺序。文章还提到了在JavaScript文件中加载CSS和设置META的方法，为网页开发提供了实用的技巧。

1、加载在头部

var js = document.createElement('script');
js.src = 'myscript.js';
document.getElementsByTagName('head')[0].appendChild(js);

另一种写法是：

var js = document.createElement('script');
js.src = 'myscript.js';
document.head.appendChild(js);

2、加载在BODY中

加载在页面中的写法如下：

var js = document.createElement('script');
js.src = 'myscript.js';
document.body.appendChild(js);

这种加载方法存在一个问题，就是有可能代码是在head区域，导致body还没达到，document.body就不存在，代码就会出错。

3、使用documentElement

document.documentElement就是html文档本身，因此肯定是存在的，这种调用的写法如下：

var js = document.createElement('script');
js.src = 'myscript.js';
var html = document.documentElement;
html.insertBefore(js, html.firstChild);

4、加载在第一个脚本前

这种方法是把js文件插入到第一个出现script的标识前，除非网页里没有任何一个script出现，否则应该不会出错。代码的写法如下：

var js = document.createElement('script');
js.src = 'myscript.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(js, first);

5、加载在当前JS文件之前或之后

这种方法是把js文件插入到目前所在的js文件前，代码的写法如下：

var js = document.createElement('script');
js.src = 'myscript.js';
var first  = document.getElementsByTagName('script'); 
var here = first[first.length-1]; 
here.parentNode.insertBefore(js,here);

加载在当前js文件之后，代码的写法如下：

var js = document.createElement('script');
js.src = 'myscript.js';
var first  = document.getElementsByTagName('script'); 
var here = first[first.length-1]; 
here.parentNode.appendChild(js);

附录：1、在JS文件里加载CSS文件

var link = document.createElement('link');
link.setAttribute('type', 'text/css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'mycss.css');
document.head.appendChild(link);

附录：2、在JS文件里设置META

var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','width=device-width, initial-scale=1');
document.head.appendChild(meta);