JS实现动态添加外部js、css到head标签的方法

本文将向您展示如何使用JavaScript动态地将外部js和css添加到head标签中。这是JavaScript操作页面元素属性的高级技巧，对于那些希望提升网页动态性的朋友们，这是一个值得参考的教程。

让我们看一个简单的函数，它可以在页面上动态地引入一个外部的js文件：

```javascript

function appendJQCDN() {

var head = document.head || document.getElementsByTagName('head')[0];

var script = document.createElement('script');

script.setAttribute("src", "

head.appendChild(script);

}

```

在这个函数中，我们首先获取页面的head元素，然后创建一个新的script元素，并设置其src属性为我们要引入的js文件的URL。我们将这个新创建的script元素添加到head元素中。

接下来，让我们看一个更复杂的例子，它允许我们在引入js文件后，执行一个回调函数：

```javascript

function loadScript(url, callback) {

var script = document.createElement("script");

script.type = "text/javascript";

// 处理回调函数

if (typeof (callback) != "undefined") {

if (script.readyState) { // 针对IE浏览器

script.onreadystatechange = function () {

if (script.readyState == "loaded" || script.readyState == "complete") {

script.onreadystatechange = null;

callback(); // 执行回调函数

}

};

} else { // 针对其他浏览器

script.onload = function () {

callback(); // 执行回调函数

};

}

};

// 设置脚本的URL并添加到页面

script.src = url;

document.body.appendChild(script);

}

```

这个函数首先创建一个新的script元素，并设置其type属性为"text/javascript"。然后，它检查是否提供了一个回调函数。如果提供了，它就会在脚本加载完成后执行这个回调函数。它将这个新的script元素添加到页面的body元素中。

现在，我们可以使用这个函数来动态地引入一个外部的js文件，并在引入后执行一个回调函数：

```javascript

loadScript(" function() {

// 这里是回调函数，可以在这里执行你需要的操作

alert('动态引入jquery成功');

});

```

如果您对JavaScript的其他主题也感兴趣，例如DOM操作、事件处理、AJAX等，可以查看我们专题系列的文章。希望本文对您在JavaScript程序设计方面的学习有所帮助。

以上内容，供您参考。如有需要，请按需修改。