在 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