了解如何在 JavaScript 中轻松创建脚本元素并为您的网页添加丰富的功能。

在 JavaScript 中创建脚本元素：

1. 使用 document.createElement() 方法创建脚本元素。
2. 将元素对象的 src 属性设置为脚本文件。
3. 使用 appendChild() 方法在 HTML 中包含脚本元素。

考虑这个示例 HTML 标记：

index.html

以下是我们如何使用 JavaScript 在 HTML 中创建脚本元素：

index.js

const script = document.createElement('script');// use local file
// script.src = 'script.js';script.src =
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';script.async = true;// make code in script to be treated as JavaScript module
// script.type = 'module';script.onload = () => {
  console.log('Script loaded successfuly');
  const box = document.getElementById('box');
  box.textContent = 'The script has loaded.';
};script.onerror = () => {
  console.log('Error occurred while loading script');
};document.body.appendChild(script);

document.createElement() 方法创建一个由标签名称指定的 HTML 元素并返回该元素。 通过传递一个脚本标签，我们创建了一个脚本元素。

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

我们在 script 元素上设置 src 属性来指定要加载的脚本文件。 我们使用 URL 指定远程文件，但我们也可以使用相对或绝对文件路径指定本地文件。

// use local file
// script.src = 'script.js';script.src =
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';

通过将 async 属性设置为 true，浏览器不必在继续解析 HTML 之前加载和评估脚本。 相反，脚本文件将被并行加载，以减少延迟并加快页面的处理速度。

script.async = true;

type 属性指示文件是什么类型的脚本。 如果它是一个 JavaScript 模块，我们需要将 type 属性设置为 module 来显示它。

script.type = 'module';

有关 script 元素支持的所有属性的完整列表，请访问有关 script 元素的 MDN 文档。

我们监听 onload 事件，以便在脚本文件成功加载时执行操作。

script.onload = () => {
  console.log('Script loaded successfuly');
  const box = document.getElementById('box');
  box.textContent = 'The script has loaded.';
};

我们监听 onerror 事件，以便在加载脚本出错时执行不同的操作。

script.onerror = () => {
  console.log('Error occurred while loading script');
};

appendChild() 方法添加一个 DOM 元素作为指定父元素的最后一个子元素。 通过在 document.body 上调用 appendChild()，我们将脚本文件添加到正文中。

document.body.appendChild(script);

要将脚本文件添加到文档的头部，我们可以将 document.body 替换为 document.head。

document.head.appendChild(script);

关注七爪网，获取更多APP/小程序/网站源码资源！