JavaScript代码怎样引入到HTML中？

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

能在 JavaScript 中创建一个 HTML 元素吗？答案是肯定的，你可以在 JavaScript 中创建一个元素让我们看看如何？

如果你想在 JavaScript 中创建一个 div 元素——

要在 JavaScript 中创建新元素，我们使用 document.createElement('div')，而不是 div，您可以分配任何 html 标签，例如 p、h1、h2、h3 等，如果您分配 p 标签，它将创建一个 p 标签。

现在，如果你想给它上一堂课，你可以做到——

为了给我们的新 div 一个类，我们使用 variablename.className = ‘class_name’ ，如上所示。

现在你也可以给它 id —

为了给 newdiv 一个 id，我们的代码是 variablename.id = ‘id_name’;

现在让我们看看我们的输出

现在，从上面的代码中，我创建了一个带有类容器和 id newElement 的 div 元素。

还有另一种方法可以在标签上设置 class 、 id 、 title 、 name ，让我们来看看。

在这里，我定义了 setAttribute() 并在括号内首先定义了标题，然后定义了标题的名称。除了标题，您可以指定类、id 或任何名称

现在我们来看看我们的输出

您可以清楚地看到，在 div 标签内，我们的代码添加了标题，即“新 div”。

现在如果你想在 div 标签内添加内容怎么办？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎样才能做到这一点？下面来看看吧。

在上面的代码中，我使用 document.createTextNode() 将我的文本分配给变量内容，因此 TextNode 用于为我们的元素提供文本。

所以，我们已经成功地向我们的 div 元素添加了一个文本。

现在，最重要的是，如果您想将内容插入现有的 html 代码以便在浏览器中看到它，您可以通过 insertBefore(newNode, referenceNode) 来完成它的作用是在参考节点之前插入您的节点。

所以在这里我从上面的 html 代码中创建了一个带有类容器和 h1 标签的 div 元素。

现在，我定义了一个名为 maindiv 的变量，并将其分配给具有类容器的 div 元素，并定义了一个变量 h1 并为其分配了 h1 标记。

现在，为了插入我们的节点，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必须插入的节点，即我们的 newdiv ，参考节点是要在其之前插入 newNode 的节点，即我们的 h1 标记。

所以从上面的输出你可以看到我们已经成功地在浏览器中显示了我们的 div 内容。

JavaScript 是一种非常有效的语言，你可以在 JavaScritp 中做很多事情，这些只是它的基础。

谢谢你

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

在线咨询

上一篇：如何实现注入html的中文不显示乱码？
下一篇：HTML 字符实体

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript代码怎样引入到HTML中？

您的项目需求