在前端開發中，操作 DOM ( 文件物件模型 ) 是常見的任務之一。本文將透過一個簡單的範例，展示如何使用 JavaScript 建立一個新的 <span> 元素，以及加入文字內容與樣式，並將它動態加入到 HTML 文件中。
範例說明：
我們的目標是使用 JavaScript 完成以下步驟，動態新增一個帶樣式的 <span> 元素：
程式碼
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>動態新增 span 元素範例</title>
<style>
/* CSS 類別管理樣式 */
.styleclass {
background-color: yellow;
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<div id="output">
</div>
<script type="text/javascript">
// 取得目標容器
const targetContainer = document.getElementById("output");
// 建立一個新的 <span> 元素
const spanNode = document.createElement("span");
//直接操作 style 屬性加入樣式
spanNode.style.backgroundColor = "yellow";
spanNode.style.color = "green";
spanNode.style.fontSize = "30px";
/* 前面 3 個敘述亦可由以下 2 個敘述來實現：*/
//spanNode.setAttribute("class", "styleclass");
//或
//spanNode.classList.add("styleclass");
// 建立文字節點並加入到 span 裡
const textNode = document.createTextNode("hello");
spanNode.appendChild(textNode);
/* 前 2 敘述可簡化如下，使用 innerText 或 textContent */
// spanNode.textContent = "hello";
// spanNode.innerText = "hello";
// 使用 appendChild 將新元素加入到父元素的末端
targetContainer.appendChild(spanNode);
// 檢查 span 是否正確加入
console.log(targetContainer.lastChild); // 輸出新建立的 span 元素
</script>
</body>
</html>
結果預期
執行上述程式碼後，網頁上會出現一段文字 "hello"，文字為綠色，背景為黃色，字體大小為 30 px，直接顯示在 id 為 #output 的 <div> 內的末尾。
結論：透過這個範例，我們學會了以下幾個基本操作：
- 如何使用 document.createElement() 動態建立元素。
- 如何使用 style 屬性直接設定樣式，以及如何使用 CSS 類別管理樣式，而非直接操作 style 屬性，這使程式碼更易於維護和擴展。
- 如何建立並加入文字節點。以及如何使用textContent 或 innerText 快速設定或取得元素的文字內容，取代了 createTextNode 和 appendChild 的步驟。
- 如何使用 appendChild() 將元素插入到 DOM 中。
- 這些操作是建立互動式網頁的重要基礎，熟練掌握將能增進你的前端開發能力！
沒有留言:
張貼留言