在前端開發中，操作 DOM ( 文件物件模型 ) 是常見的任務之一。本文將透過一個簡單的範例，展示如何使用 JavaScript 建立一個新的 <span> 元素，以及加入文字內容與樣式，並將它動態加入到 HTML 文件中。
範例說明：
我們的目標是使用 JavaScript 完成以下步驟，動態新增一個帶樣式的 <span> 元素：
- 建立一個新的 span 元素。
- 建立一個新的文字節點，為這個 span 元素加入文字內容 "hello" 或使用 innerText、textContent。（請參考範例程式碼）
- 直接操作 style 屬性設定樣式（基礎寫法），或採用推薦的 CSS 類別管理樣式（使用 setAttribute 或 classList）：目標樣式為背景黃色、文字為綠色、字體大小為 30 px。（請參考範例程式碼）
- 使用 appendChild() 方法將這個元素插入到文件中一個指定的 div 容器內的末端。
