在前端開發中，操作 DOM ( 文件物件模型 ) 是常見的任務之一，尤其是當我們想要動態新增元素或更新內容而不重新載入頁面時。本文將透過一個簡單的範例，展示如何使用 JavaScript 建立一個新的 <span> 元素，加入文字內容與樣式，並將它插入到 HTML 的 <body> 中。
範例說明：我們的目標是使用 JavaScript 完成以下步驟，動態新增一個帶樣式的 <span> 元素：
- 建立一個新的 span 元素。
- 為這個元素加入文字內容 "hello"。
- 設定樣式：背景為黃色、文字為綠色、字體大小為 30 px。
- 將這個元素插入到文件的 <body> 內。
範例程式碼如下：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>動態新增 span 元素範例</title>
</head>
<body>
<script type="text/javascript">
// 建立一個新的 <span> 元素
const spanNode = document.createElement("span"); // const spanNode 指向新建立的 span 元素物件
//加入樣式
spanNode.style.backgroundColor = "yellow";
spanNode.style.color = "green";
spanNode.style.fontSize = "30px";
// 建立文字節點並加入到 span 裡
const textNode = document.createTextNode("hello");
spanNode.appendChild(textNode);
// 將 span 加入到 body 中
document.body.appendChild(spanNode);
// 檢查 span 是否正確加入
console.log(document.body.lastChild); // [object HTMLSpanElement]
console.log(document.body.lastChild.nodeName); // SPAN
console.log(document.body.lastChild.firstChild.nodeValue); // hello
</script>
</body>
</html>
結果預期
執行上述程式碼後，網頁上會出現一段文字 "hello"，文字為綠色，背景為黃色，字體大小為 30 px，直接顯示在 <body> 內的最底部位置。
結論：透過這個範例，我們學會了以下幾個基本操作：
- 如何使用 document.createElement() 動態建立元素。
- 如何使用 style 屬性直接設定樣式。
- 如何建立並加入文字節點。
- 如何使用 appendChild() 將元素插入到 DOM 中。
- 這些操作是建立互動式網頁的重要基礎，熟練掌握將能為你的前端開發能力大大加分！
沒有留言:
張貼留言
請注意 : 您的留言發佈成功 , 需經審核後 , 才能決定是否回覆 . 謝謝 !!