Changing HTML Content

You will be able to read and change an element’s visible text and HTML markup using JavaScript, choosing the safest property for the job.

What it is

Changing HTML content means updating what appears inside a DOM element after the page has loaded. In JavaScript, you usually select an element, then read or write one of two main properties: textContent for plain text and innerHTML for markup. Related terms include the DOM, element, node, child nodes, and escaping.

Think of an element as a container. Setting textContent replaces everything inside with a single text node. Setting innerHTML replaces everything inside with a parsed HTML fragment, so tags become real elements.

Why it matters

• Update the user interface without reloading the page.
• Show user input, API results, or validation messages.
• Read current content for debugging or processing.
• Build simple dynamic lists, alerts, or status messages.
• Avoid security bugs by choosing safe text insertion.

Syntax or steps

1. Select the element: const el = document.querySelector("#target");
2. Read text: const current = el.textContent;
3. Write text: el.textContent = "Hello";
4. Read markup: const html = el.innerHTML;
5. Write markup: el.innerHTML = "<strong>Hello</strong>";

Example

<p id="title">Old</p>
<ul id="notes"></ul>

<script>
const title = document.querySelector("#title");
const notes = document.querySelector("#notes");

title.textContent = "Hello";
notes.innerHTML = "<li>Buy milk</li><li>Write code</li>";

console.log(title.textContent);
console.log(notes.innerHTML);
</script>

Part by part

• document.querySelector("#title") finds the paragraph with id title.
• title.textContent = "Hello" replaces the paragraph’s children with plain text.
• notes.innerHTML = ... parses the string as HTML and creates two li elements inside the list.
• console.log(title.textContent) reads the visible text back.
• console.log(notes.innerHTML) reads the list’s markup back.

Common mistakes

• Using innerHTML for plain text. If the text contains < or comes from a user, it may be parsed or create an XSS risk. Use textContent.
• Forgetting that assigning textContent removes all child elements, including buttons, inputs, or nested lists.
• Writing to an element before it exists. Put scripts after the HTML or wait for DOMContentLoaded.
• Reading innerHTML and expecting the exact original formatting. The browser may normalize markup.

When to use it

Compare textContent, innerHTML, and creating elements.

Practice

Guided: Add a paragraph with id message, then set its text to Ready and log it.

<p id="message"></p>

<script>
const message = document.querySelector("#message");
message.textContent = "Ready";
console.log(message.textContent);
</script>

Expected output: Ready.

Challenge: Replace the content of a list with two items using innerHTML, then read the list’s text back.

Hint: Use list.innerHTML = "<li>One</li><li>Two</li>"; and console.log(list.textContent);.

Quick check

Which property should you use to display a user-entered name safely?

Use textContent, because it treats the value as text rather than HTML.

Summary

JavaScript changes page content by reading and writing DOM properties. Use textContent for safe plain text and innerHTML only when you need trusted markup.