textContent
Write plain text into an element.
Platform under construction
Changing Content
JavaScript can change visible content, but the method you choose decides whether the update is safe, readable and maintainable.
status.textContent = "Saved"; list.replaceChildren(firstItem, secondItem); input.value = "Draft";
DOM & HTML Interaction
Use the safest content API that matches the job.
Use textContent for plain text. It treats the value as text, not markup, which makes it the default choice for user-facing strings.
Use value for form fields, hidden for visibility state and replaceChildren when you want to rebuild child nodes safely.
innerHTML parses HTML. It is powerful, but it becomes dangerous when untrusted text can reach it.
innerHTML
Parse and insert HTML markup.
value
Read or write form control values.
replaceChildren
Replace child nodes without string-building HTML.
Examples
DOM code should be scoped, safe and visible in the interface.
Create elements for dynamic data
const item = document.createElement("li");
item.textContent = record.title;
list.append(item);
Injecting data into innerHTML
list.innerHTML += `<li>${record.title}</li>`;
// Dangerous when title contains unexpected markup.
Code patterns
Reusable examples for quick reference.
These patterns are the DOM moves you use constantly: select, read, change, create, navigate and render.
Plain text
Safe default for labels and messages.
message.textContent = "Saved successfully";
Form value
Inputs store their visible value in value.
const value = input.value.trim(); input.value = value;
Replace children
Build nodes and replace the list at once.
const item = document.createElement("li");
item.textContent = "Ready";
list.replaceChildren(item);
HTML only from trusted templates
Do not put external text directly into innerHTML.
container.innerHTML = "<strong>Ready</strong>";
Rules that matter
Keep the DOM predictable.
DOM APIs are powerful because they affect the live page. Use them with stable hooks, clear state and safe text updates.
Default to textContent
It is predictable and safe for text.
Use value for inputs
textContent does not change an input value.
Avoid string-built HTML
It is easy to create injection bugs.
Use hidden for visibility state
It communicates intent better than inline display changes.
Build nodes for lists
createElement keeps data and markup separate.
Replace instead of accumulating
replaceChildren avoids stale duplicated content.
Production thinking
A good DOM layer connects behavior to HTML without making the page fragile.
Why does this matter?
Most interface bugs are content bugs: the wrong text, unsafe HTML or stale state in the wrong element.
Accessibility
Dynamic messages should be readable as text and, when important, placed in a status region.
Production note
Production code should centralize rendering patterns so content updates are safe by default.
SEO note
Critical text should not depend on fragile client-side string injection.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change append to prepend.
- Clear the input after adding an item.
- Replace the full list with replaceChildren.
Practice assignment
Do this before moving to the next topic.
- Write textContent safely.
- Read an input value.
- Render dynamic data without innerHTML.
Try it yourself
Render a list safely
Self-check
Before you continue, prove that you understand Changing Content.
If you can explain the DOM operation and its failure path, you are ready to use it in real UI code.
- Can you explain textContent?
- Can you explain when innerHTML is risky?
- Can you explain value on form fields?
- Can you explain replaceChildren?
- Can you explain why string-built HTML can be unsafe?
Senior audit upgrade
Extra production context for Changing Content.
Safe DOM default
Prefer textContent, createElement, templates and replaceChildren for normal UI rendering. Reach for innerHTML only when the markup is controlled and the risk is understood.
const item = document.createElement("li");
item.textContent = userInput;
list.replaceChildren(item);