在 JAVASCRIPT 中创建 HTML 元素..

在 JAVASCRIPT 中创建 HTML 元素...

能在 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 中做很多事情，这些只是它的基础。

谢谢你

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

在 JavaScript 中创建脚本元素：

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

考虑这个示例 HTML 标记：

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <div id="box"></div>    <script src="index.js"></script>
  </body>
</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/小程序/网站源码资源！

作元素样式有两种方式，一种是操作style属性，一种是操作className属性，下面我们分别进行讲解。

1. 操作style属性

除了前面讲解的元素内容和属性外，对于元素对象的样式，可以直接通过“元素对象.style.样式属性名”的方式操作。样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写。例如，设置字体大小的样式名font-size，对应的样式属性名为fontSize。

为了便于读者的学习使用，下面我们通过表1列出常用style属性中CSS样式名称的书写及说明。

表1 常见的style属性操作的样式名

名称	说明
background	设置或返回元素的背景属性
backgroundColor	设置或返回元素的背景色
display	设置或返回元素的显示类型
fontSize	设置或返回元素的字体大小
height	设置或返回元素的高度
left	设置或返回定位元素的左部位置
listStyleType	设置或返回列表项标记的类型
overflow	设置或返回如何处理呈现在元素框外面的内容
textAlign	设置或返回文本的水平对齐方式
textDecoration	设置或返回文本的修饰
textIndent	设置或返回文本第一行的缩进
transform	向元素应用2D或3D转换

接下来，通过代码演示如何对元素的样式进行添加，具体示例如下。

   <div id="box"></div>

   <script>

    var ele=document.querySelector('#box'); // 获取元素对象

    ele.style.width='100px';

    ele.style.height='100px';

    ele.style.transform='rotate(7deg)';

   </script>

上述第4~6行代码用于为获取的ele元素对象添加样式，其效果相当于在CSS中添加以下样式。

#box {width: 100px; height: 100px; transform: rotate(7deg);}

2. 操作className属性

在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为“元素对象.className”。访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。

接下来，通过代码演示如何使用className更改元素的样式。

（1）编写html结构代码，具体示例如下。

   <style>

    div {

     width: 100px;

     height: 100px;

     background-color: pink;

    } 

   </style>

   <body>

    <div class="first">文本</div>

  </body>

上述代码中，第9行给div元素添加first类，并在style中设置了first的样式，浏览器预览效果如图1所示。

图1 初始效果

（2）单击div元素更改元素的样式，示例代码如下。

   <script>

    var test=document.querySelector('div');

    test.onclick=function () {

     this.className='change';

    };

   </script>

上述代码中，第2行获取div元素存储在test对象中。第3~5行为text对象添加onclick单击事件，第4行执行事件处理程序使用this.className给test对象设置change类名，其中this指的是test对象。

（3）在style中添加change类，样式代码如下。

   .change {

    background-color: purple;

    color: #fff;

    font-size: 25px;

    margin-top: 100px;

   }

（4）单击div盒子，浏览器预览效果如图2所示。

图2 单击后效果

执行上述代码之后，会直接把原先的类名first修改为change，如果想要保留原先的类名，可以采取多类名选择器的方式，修改第（2）步的第4行代码，示例代码如下。

this.className='first change';

修改之后，在控制台查看到div元素的类已经修改成了<div class="first change">文本</div>，保留了之前的类名。

在线咨询

上一篇：单网页高利润产品谷歌广告实操案例（一）
下一篇：前端网页web开发大神总结的HTML标签-列表

您的项目需求

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

整合营销服务商

在 JAVASCRIPT 中创建 HTML 元素..

您的项目需求