How to Change HTML Content in JavaScript

Use DOM content updates when your page needs to show new text, replace HTML blocks, or react to user actions without reloading. The cleanest default is textContent for plain text and innerHTML only when real HTML markup is required.

What you’ll build or solve

You’ll learn how to change HTML content in JavaScript using textContent and innerHTML. You’ll also know when each option is the safer choice.

When this approach works best

This approach is the right choice when page content needs to react to data, clicks, form input, or API responses.

Common real-world scenarios include:

• Updating headings
• Showing success messages
• Replacing card content
• Rendering fetched data
• Toggling UI states

This is a bad idea when untrusted user input is inserted with innerHTML, because that can create security issues.

Prerequisites

You only need:

• A basic HTML page
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the element and update its content

Start by selecting the target element.

<h1 class="title">Welcome</h1>

<script>
  const title = document.querySelector(".title");
  title.textContent = "Welcome back";
</script>

Use textContent for plain text updates.

const status = document.querySelector(".status");
status.textContent = "Saved successfully";

Use innerHTML only when the new content includes real HTML tags.

const card = document.querySelector(".card");
card.innerHTML = "<strong>Premium plan</strong>";

What to look for:

• textContent is safest for text
• innerHTML parses HTML markup
• Always select the element first
• Great for live UI updates
• Avoid innerHTML for raw user input

Examples you can copy

Update heading text

const heading = document.querySelector("h1");
heading.textContent = "New dashboard";

Show success message

const message = document.querySelector(".message");
message.textContent = "Payment complete";

Insert formatted HTML

const result = document.querySelector(".result");
result.innerHTML = "<p><strong>Success</strong> saved</p>";

Common mistakes and how to fix them

Mistake 1: Using innerHTML for plain text

What the reader might do:

message.innerHTML = "Saved";

Why it breaks: it still works, but it is less safe and less clear than needed.

Corrected approach:

message.textContent = "Saved";

Mistake 2: Running before the element exists

What the reader might do:

<script>
  document.querySelector(".title").textContent = "Updated";
</script>

<h1 class="title">Welcome</h1>

Why it breaks: the script runs before the element is parsed.

Corrected approach:

Move the script below the HTML or wait for DOM load.

Mistake 3: Inserting untrusted user input with innerHTML

What the reader might do:

card.innerHTML = userInput;

Why it breaks: malicious HTML or scripts can be injected.

Corrected approach:

card.textContent = userInput;

Troubleshooting

If nothing updates, confirm the selector returns the correct element.

If the result is null, move the script below the HTML.

If tags appear as plain text, switch from textContent to innerHTML.

If the content comes from users, prefer textContent.

Quick recap

• Use textContent for text updates
• Use innerHTML for real HTML markup
• Select the element first
• Run the script after the HTML exists
• Avoid innerHTML for user input