在 JavaScript 中使用类创建元素
Muhammad Muzammil Hussain
2023年10月12日
JavaScript
JavaScript Element
本文将使用 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 的扩展名保存，在浏览器中打开并测试示例。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe