Solution 要做什麼
對照完整答案、責任邊界與原因。
本主題檔案：files/main.js
定位：先在 append 前記錄 fragment.childElementCount。
Solution · code-edit
DocumentFragment
對照完整答案、責任邊界與原因。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
空 list 與三筆文字資料。
預期看到
fragmentBefore=3、domAfter=3、fragmentAfter=0、appendCalls=1。
const fragment=document.createDocumentFragment(); fragment.append(li); list.append(fragment)。檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
入口 HTML：提供服務清單目標與 status，讓 DOM API 有明確的渲染位置。style.css
呈現層：只負責清單、狀態與窄版可讀性，不承擔資料或渲染邏輯。main.js
行為層：保存 services、建立 DOM 節點、寫入文字並留下渲染筆數證據。
證據：fragmentBefore=3、domAfter=3、fragmentAfter=0
回到主題說明