在 JavaScript 中使用类创建元素
Muhammad Muzammil Hussain
2023年10月12日
本文将使用 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 的扩展名保存，在浏览器中打开并测试示例。