LESSON-16 · checkpoint
主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：修正前可觀察 innerHTML 把特殊字串解析成 strong
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console 與檔案行號狀態。
會用到的檔案：index.html、style.css、main.js
本堂焦點：用 DOM API 將服務資料安全地渲染到頁面
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 main.js 的「card.textContent／card.innerHTML」位置完成：把故意不安全的 innerHTML 改成 textContent
貼上位置：main.js：card.textContent／card.innerHTML 區塊，先保留同一檔案的其他內容。
card.innerHTML = `${item.name}｜${item.price} 元`;預期結果：第一筆服務的 <strong> 標記會以文字顯示，Elements 不會多出 strong 子元素。
驗收證據：修改前後比較第一個 li 的 innerHTML、childElementCount 與畫面文字。
常見錯誤：只看畫面像是正常，就保留 innerHTML，沒有檢查資料是否被當 HTML 解析。
第一個檢查：只看 renderServices 內建立 card 的那一行。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html入口 HTML：提供服務清單目標與 status，讓 DOM API 有明確的渲染位置。style.css呈現層：只負責清單、狀態與窄版可讀性，不承擔資料或渲染邏輯。main.js行為層：保存 services、建立 DOM 節點、寫入文字並留下渲染筆數證據。index.html入口 HTML：提供服務清單目標與 status，讓 DOM API 有明確的渲染位置。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%230f4c5c'/%3E%3C/svg%3E" type="image/svg+xml">
<title>LESSON-16｜DOM 渲染服務清單｜checkpoint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page-shell">
<p class="eyebrow">LESSON-16 · DOM API</p>
<h1>用 DOM API 渲染服務清單</h1>
<p class="page-description">這份頁面可以執行，但 JavaScript 故意把資料當 HTML 解析；請先觀察再修正。</p>
<section aria-labelledby="services-title">
<h2 id="services-title">服務方案</h2>
<ul id="service-list" class="service-list" aria-label="服務方案清單"></ul>
<p id="status" class="status" role="status" aria-live="polite">尚未渲染</p>
</section>
</main>
<script src="main.js" defer></script>
</body>
</html>style.css呈現層：只負責清單、狀態與窄版可讀性，不承擔資料或渲染邏輯。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 2rem 0 4rem; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .06em; }
.page-description { color: #52657d; }
.service-list { display: grid; gap: .75rem; margin: 1rem 0 0; padding-left: 2.5rem; }
.service-list li { padding: .75rem; border: 1px solid #cbd8e4; border-radius: .6rem; background: #fff; }
.status { min-height: 1.8rem; color: #17643d; font-weight: 700; }
@media (max-width: 560px) { .page-shell { padding: 1rem 0 3rem; } }main.js行為層：保存 services、建立 DOM 節點、寫入文字並留下渲染筆數證據。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const services = [
{ name: "到府整理 <strong>優惠</strong>", price: 1200 },
{ name: "定期維護", price: 800 },
{ name: "到府檢查", price: 600 },
];
const list = document.querySelector("#service-list");
const status = document.querySelector("#status");
function renderServices(items) {
list.replaceChildren();
items.forEach((item) => {
const card = document.createElement("li");
card.innerHTML = item.name + "｜" + item.price + " 元";
list.append(card);
});
}
renderServices(services);
status.textContent = "已渲染 " + services.length + " 筆服務";
console.log("LESSON-16：已渲染 " + services.length + " 筆服務");Checkpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。