如何在 JavaScript 中创建脚本元素

如何在 JavaScript 中创建脚本元素

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

创建一个 脚本 JavaScript 中的元素：

1. 使用 文档.createElement() 创建方法 脚本 元素。
2. 设置 源代码 元素对象上的属性到脚本文件。
3. 使用 附加孩子（） 方法。

考虑这个示例 HTML 标记：

索引.html

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

index.js

const script = document.createElement('script'); // 使用本地文件
// script.src = 'script.js'; 脚本.src =
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'; script.async = true; // 使脚本中的代码被视为 JavaScript 模块
// script.type = '模块'; script.onload = () => {
console.log('脚本加载成功');
const box = document.getElementById('box');
box.textContent = '脚本已加载。';
}; script.onerror = () => {
console.log('加载脚本时出错');
}; document.body.appendChild(脚本);

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

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

我们设置 源代码 财产在 脚本 元素来指​​定要加载的脚本文件。我们使用 URL 指定远程文件，但我们也可以使用相对或绝对文件路径指定本地文件。

// 使用本地文件
// script.src = 'script.js'; 脚本.src =
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';

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

script.async = true;

这 类型 属性指示文件是什么类型的脚本。如果它是一个 JavaScript 模块 ，我们需要设置 类型 归因于 模块 展示这一点。

script.type = '模块';

有关受支持的所有属性的完整列表 脚本 元素，访问 脚本元素上的 MDN 文档 .

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

script.onload = () => {
console.log('脚本加载成功');
const box = document.getElementById('box');
box.textContent = '脚本已加载。';
};

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

script.onerror = () => {
console.log('加载脚本时出错');
};

这 附加孩子（） 方法添加一个 DOM 元素作为指定父元素的最后一个子元素。通过调用 附加孩子（） 上 文档.body ，我们将脚本文件添加到正文中。

document.body.appendChild(脚本);

The script file is included in the body of the document.

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

document.head.appendChild(脚本);

The script file is included in the head of the document.

最初发表于 编码beautydev.com

ES13 中的 11 个惊人的 JavaScript 新特性

本指南将带您快速了解 ECMAScript 13 中添加的所有最新功能。这些强大的新功能将使您的 JavaScript 现代化，代码更短、更具表现力。

注册 并立即获得免费副本。

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/36140/10571409