如何在 JavaScript 中创建脚本元素
如何在 JavaScript 中创建脚本元素
了解如何在 JavaScript 中轻松创建脚本元素并为您的网页添加丰富的功能。
创建一个 脚本 JavaScript 中的元素：
- 使用
文档.createElement()创建方法脚本元素。 - 设置
源代码元素对象上的属性到脚本文件。 - 使用
附加孩子（）方法。
考虑这个示例 HTML 标记：
索引.html
<!DOCTYPE html>
<html>
<head>
<title>编码美容教程</title>
</head>
<body>
<div id="box"></div> <script src="index.js"></script>
</body>
</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 版权协议，转载请附上原文出处链接和本声明
