在 JavaScript 中使用类创建元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中使用类创建元素

作者：迹忆客最近更新：2023/03/11 浏览次数：

本文将使用 JavaScript 函数生成 HTML 元素；我们将在按钮单击事件上调用该函数并创建一个带有类的元素。

在 JavaScript 中创建元素

document.createElement() 是一个默认方法，它接受 HTML 标签名称的参数作为字符串并创建一个 HTML 元素类型节点。

我们可以使用它创建任何 HTML 元素并将其附加到 DOM 树。我们可以为样式分配 id、content 和 CSS，并将该元素附加到 HTML 页面的主体。

基本语法：

let myElement = document.createElement(anyTag);

在 JavaScript 中使用类创建元素

我们可以使用 classList.add() 方法创建一个带有类的 HTML 元素。我们还可以使用该方法向一个元素添加多个类。

如果类已经存在于 HTML 元素中，则方法 add() 将通过该类。我们可以使用 appendChild() 方法将元素节点附加到 HTML 的主体。

类的语法：

element.classList.add('bg-red','text-lg')

例子：

<!DOCTYPE html>
<html>
   <style>
      .mystyle {
      background-color: yellow;
      padding: 10px;
      }
   </style>
   <body>
      <h1>Delftstack learning</h1>
      <h2>Create element with class using JavaScript</h2>
      <p>Click the button to create an element:</p>
      <button onclick="createFunction()">Create</button>
      <script>
         function createFunction() {
         let myDiv = document.createElement('div'); // element creation
         myDiv.classList.add('mystyle'); // adding class
         let content = document.createTextNode('This is a text content of an element!'); // text content
         myDiv.appendChild(content); // append text content to element
         document.body.appendChild(myDiv) // append element to body
         }
         
      </script>
   </body>
</html>

在上面的 HTML 源代码中，我们创建了一个 button 元素，并且在该按钮的点击事件中，我们调用了 createFunction()。在该函数中，我们使用 document.createElement('div') 方法创建一个 div 元素并将其存储在变量 myDiv 中。

然后，我们使用 myDiv.classList.add('mystyle') 方法将类 mystyle 添加到该元素，并使用 document.createTextNode() 添加要显示的文本内容并附加到 myDiv。

最后，我们使用 document.body.appendChild(myDiv) 将元素附加到 HTML 源代码的主体。可以将上面的源码以 html 的扩展名保存，在浏览器中打开并测试示例。

上一篇：在 JavaScript 中为 DOM 元素添加属性

下一篇：如何在 JavaScript 中获取对象的长度

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：