DOM Manipulation Examples

Browser DOM programs select elements, respond to user events, and safely update text or nodes. DOM element lookups may return null, so guard missing elements. Browser code needs an HTML document and browser APIs; the primary example tests the formatting logic independently.

The function produces two labels; a separate browser script creates li elements and assigns textContent. Browser interactions were type-checked, not simulated as a DOM in Node.

Avoid assigning untrusted user text to innerHTML when textContent will do; check querySelector results for null.

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

type Task = { title: string; done: boolean };
function renderLabel(task: Task): string {
  return `${task.done ? "✓" : "○"} ${task.title}`;
}
console.log(renderLabel({ title: "Study", done: false }));
console.log(renderLabel({ title: "Review", done: true }));

Verified output

○ Study
✓ Review

Compile: npx tsc --strict --target es2022 --module commonjs dom-manipulation-examples.ts; run: node dom-manipulation-examples.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

The function produces two labels; a separate browser script creates li elements and assigns textContent. Browser interactions were type-checked, not simulated as a DOM in Node.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Integration companion: The primary example above is self-contained. The files below demonstrate a real framework, runtime, or project setup and may need additional packages or a browser.

index.html

<!doctype html><html lang="en"><meta charset="utf-8"><title>Typed DOM</title>
<button id="add">Add</button><ul id="tasks"></ul><script type="module" src="./app.js"></script></html>

app.ts

const button = document.querySelector<HTMLButtonElement>("#add");
const list = document.querySelector<HTMLUListElement>("#tasks");
button?.addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = "New TypeScript task";
  list?.append(li);
});

Setup and execution

npx tsc --strict --target es2022 --module es2022 --lib es2022,dom app.ts
python3 -m http.server 8000
Open http://localhost:8000 in a browser

The browser example uses real document.querySelector and createElement APIs; it was typechecked against DOM declarations. It must run in a browser to manipulate the HTML page.

Validation: This companion’s TypeScript source was also compiled successfully. Network-facing or browser interaction was not runtime-tested.

Avoid assigning untrusted user text to innerHTML when textContent will do; check querySelector results for null.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Create an HTML page with a button that adds list items and a second button that toggles completed state.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

The function produces two labels; a separate browser script creates li elements and assigns textContent. Browser interactions were type-checked, not simulated as a DOM in Node.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.