本篇文章目錄

1. 前言：從資料庫（Array）到畫面（DOM）的 bridge
2. 核心技術解析：createElement vs innerHTML 選擇與安全性考量
3. 實戰 DOM 動態渲染：renderSchedule() 雙層迴圈與分派邏輯
4. 持久化儲存與狀態同步：saveAndRender() 模組化封裝
5. 結語

一、 前言：從資料庫（Array）到畫面（DOM）的 Bridge

在 Day 20 中，我們成功建立了包含多選時段（times: ['morning', 'night']）的藥品物件陣列 medList，並透過 LocalStorage 將資料留存。

然而，陣列裡面的資料只是記憶體中的「字串與數字」，要讓使用者在網頁畫面上看到漂亮的用藥卡片，我們必須透過 JavaScript 動態建立 HTML 節點 (DOM Nodes) 並插入到表格的四個指定格子（slot-morning、slot-noon、slot-night、slot-bedtime）中！

今天 [Day 21]，我們將實作動態渲染的核心函式 renderSchedule()！

二、 核心技術解析：createElement 與 appendChild

在動態產生 DOM 元素時，常見兩種作法：

在我們的用藥時間表中，因為使用者可以輸入藥品名稱與備註，使用 document.createElement 搭配建立文字節點（或正確處理轉義）是更嚴謹且符合軟體工程規格的作法！

三、 實戰 DOM 動態渲染：renderSchedule() 分派邏輯

我們的動態渲染流程分為三大步驟：

1. 重置清空：每次繪製前，先將 4 個 slot 格子的舊內容清空。
2. 雙層巡訪 (Nested Iteration)：
   • 外層迴圈：巡訪 medList 裡面的每一顆藥品。
   • 內層迴圈：巡訪該藥品的 times 陣列（如 ['morning', 'night']），找出對應的表格 slot。
3. 節點建立與掛載：為每個時段獨立建立一份 .med-card DOM 節點並 appendChild 插入。

完整 JavaScript 渲染程式碼：

/tool3-schedule.js

四、 持久化儲存與狀態同步：saveAndRender() 模組化封裝

為了確保「新增藥品」、「刪除藥品」或「清空時間表」時，LocalStorage 的資料 與 畫面的 DOM 渲染 永遠保持一致，我們將這兩件事封裝成一個極簡的模組化函式 saveAndRender()：

/tool3-schedule.js

chip.querySelector(".btn-del").addEventListener("click", (e) => {
   const idToDel = Number(e.target.getAttribute("data-id"));
   medList = medList.filter(item => item.id !== idToDel);
   saveAndRender();
   });

五、 結語

今天我們順利運用 document.createElement 與 appendChild 實現了多時段陣列資料的 DOM 動態繪製，並透過 saveAndRender() 建立了穩固的狀態同步機制！

現在，使用者無論勾選「早、中、晚、睡前」的任何組合，點擊新增後藥品卡片都能精準落入對應的表格格子中，重新整理網頁資料也能完美復原。

在明天的 [Day 22] 中，我們將實作 單項藥品刪除與清空時間表 功能，並進行 [Tool 3 每日用藥時間表生成器] 的完整總結與列印功能展示！