Creating and Updating DOM Elements

createElement constructs real DOM nodes in a browser; textContent and append add content safely without parsing HTML markup. Keep data transformations separate from DOM operations so they can be tested without a browser. Use textContent for untrusted plain text rather than interpolating into innerHTML.

A small pure formatter decides the label, while the browser example uses document.createElement("li") and sets textContent before appending it.

innerHTML parses HTML and can introduce injection vulnerabilities when used with untrusted input. Use textContent for plain text.

Save as creating-updating-dom-elements.ts. The following program passed strict TypeScript compilation, and the displayed output was captured by executing its emitted JavaScript with Node.js 22.16.0.

TypeScript source

function displayTask(title: string, done: boolean): string {
  return `${done ? "✓" : "○"} ${title}`;
}
console.log(displayTask("Read", false));
console.log(displayTask("Practice", true));

Verified output

○ Read
✓ Practice

Compile: npx tsc --strict --target es2022 --module commonjs creating-updating-dom-elements.ts; run: node creating-updating-dom-elements.js. For Node.js API examples, install @types/node first. For browser projects, use the browser-specific instructions below.

The example runs in Node.js 22.16.0; if it reads runtime environment details, your displayed values may differ.

A small pure formatter decides the label, while the browser example uses document.createElement("li") and sets textContent before appending it.

Predict what changes if you alter one input. Then run the code to compare your reasoning with the real output.

Real browser lab: This TypeScript targets actual DOM APIs and was successfully type-checked against the DOM library. It requires a browser; its runtime interaction was not simulated in Node.js. Save the two files together, compile the TypeScript, and serve this folder through a local HTTP server such as python3 -m http.server 8000 (especially important for modules and workers).

index.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>TypeScript browser lab</title></head><body>
<button id="action">Add task</button><ul id="tasks"></ul>
<script type="module" src="./app.js"></script>
</body></html>

app.ts

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

Compile: npx tsc --strict --target es2022 --module es2022 --lib es2022,dom app.ts. For the worker example also compile worker.ts with --lib es2022,webworker. Then open the served HTML page in a browser to interact with it.

innerHTML parses HTML and can introduce injection vulnerabilities when used with untrusted input. Use textContent for plain text.

Identify whether the failure is a type-checking issue, a configuration issue, or a runtime behavior issue before choosing a fix.

Make a button that adds a new <li> to a list. Use textContent rather than HTML-string concatenation.

Write down your expected result first. For configuration examples, compare compiler output and diagnostics; for test examples, make the assertion fail deliberately to verify that the tool reports it.

createElement constructs real DOM nodes in a browser; textContent and append add content safely without parsing HTML markup.

Run the primary example, then complete the practice task or environment-specific lab.