Changing Text and HTML Content
Update content with textContent and innerHTML.
Changing Text and HTML Content is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Reading and Writing Text
To change what an element displays, you can set its text or its HTML. The right choice depends on whether you need markup and how much you trust the data.
textContent
textContent gets or sets the raw text of an element. Setting it replaces all children with a single text node and treats input as plain text.
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent Escapes Markup
Because it is plain text, any HTML in the string is shown literally, not parsed. This makes it safe against injection.
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML gets or sets the HTML markup inside an element. Setting it parses the string as HTML and builds real nodes.
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML Replaces Everything
Assigning to innerHTML discards existing children and rebuilds the subtree from the new markup.
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";The XSS Danger
Never put untrusted user input into innerHTML. A malicious string can inject scripts or event handlers, a vulnerability called XSS.
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText is similar to textContent but is aware of styling: it reflects rendered text and ignores hidden elements.
console.log(el.innerText); // visible text onlytextContent vs innerText
textContent returns all text including hidden content and is faster because it does not trigger layout. innerText is layout-aware and slower.
el.textContent; // all text, even display:none
el.innerText; // only what is visually renderedAppending Text Safely
To add text without wiping existing nodes, build a text node or use insertAdjacentText instead of overwriting textContent.
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");Inserting HTML Without Reparse
insertAdjacentHTML adds markup at a position without re-parsing the whole element, which is more efficient than rebuilding innerHTML.
box.insertAdjacentHTML("beforeend", "<li>New item</li>");Choosing the Right Property
Use textContent for plain text (the safe default), innerHTML only with trusted markup, and innerText when you specifically need rendered, visible text.
Quick Check
Pick the safe approach.
Recap
textContent sets plain, escaped text and is the safe default. innerHTML parses markup but risks XSS with untrusted input. innerText reflects only visible, rendered text. For adding content, prefer insertAdjacentHTML/insertAdjacentText over overwriting the whole element.
Frequently asked questions
Is the “Changing Text and HTML Content” lesson free?
Yes — the full text of “Changing Text and HTML Content” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Changing Text and HTML Content”?
Update content with textContent and innerHTML. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Changing Text and HTML Content” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Changing Text and HTML Content
- Creating and Inserting Elements
- Modifying Attributes and Classes
- Removing and Replacing Nodes