在 JavaScript 中使用類建立元素

Muhammad Muzammil Hussain 2023年1月30日 2022年5月26日
  1. 在 JavaScript 中建立元素
  2. 在 JavaScript 中使用類建立元素
在 JavaScript 中使用類建立元素

本文將使用 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 Element