在 JavaScript 中使用類建立元素
Muhammad Muzammil Hussain
2023年1月30日
2022年5月26日
本文將使用 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 的副檔名儲存，在瀏覽器中開啟並測試示例。