Render data as text

15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.

The third task contains characters that resemble HTML. textContent displays those characters as text. Replacing it with innerHTML would interpret markup and can create an injection risk with untrusted data. Add an item containing an ampersand and angle brackets. Verify that the visible result preserves the literal text.

<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Agila study</title>
<main><h1>Tasks</h1><ul id="tasks"></ul></main>
<script>const tasks=["Read","Test","<strong>Explain</strong>"];for(const text of tasks){const li=document.createElement("li");li.textContent=text;document.getElementById("tasks").append(li);}</script></html>

Practice and evidence

Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.