Select the DOM and render content

What you will build

Render data as a list, progress text, and an empty state.

Understand the idea first

Render data as a list, progress text, and an empty state.

Build it step by step

const list = document.querySelector('#session-list');
function renderSessions(items) {
  list.replaceChildren();
  if (!items.length) {
    list.textContent = '还没有学习记录。';
    return;
  }
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = `${item.topic} · ${item.minutes} 分钟`;
    list.append(li);
  }
}

1. Open the project from the previous lesson and record its current result.
2. Type and run the example, then complete this task: Render two records and an empty array; keep using textContent for user data.
3. Change at least one input, predict the result, and verify it.
4. Create and repair this lesson's typical failure: If querySelector returns null, check the selector and script timing.

Read the important lines

• Render data as a list, progress text, and an empty state.
• Read the code as input, processing, and output; point to each part.
• A first successful run is not enough; verify a different input and an edge case.

Common mistakes and what to check

Practice without copying

Render two records and an empty array; keep using textContent for user data.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases