How to Change the Text or HTML Content of an Element in JavaScript

Dynamically changing the content of an element is one of the most fundamental operations in DOM manipulation. Whether you're updating a status message, rendering data from an API, or adding a new item to a list, you need to know the right tool for the job.

This guide will teach you the modern, standard methods for both replacing and adding content to an element. You will learn the crucial difference between working with safe, plain text versus potentially unsafe HTML, and understand the best practice for each scenario.

Part 1: Replacing the Content of an Element

These methods are destructive—they will completely remove any existing content inside the element and replace it with new content.

Replacing with Plain Text (Recommended & Safe)

If you only need to change the text of an element, the textContent property is the best and safest choice.

For example, we want to replace the initial text of a div with a new message.

<div id="status">Loading...</div>

The Solution: element.textContent

The textContent property gets or sets the text content of an element and its descendants. It automatically handles the escaping of any HTML characters, making it immune to Cross-Site Scripting (XSS) attacks.

const statusDiv = document.getElementById('status');

// This is the safe and recommended way to change text.
statusDiv.textContent = 'Load complete!';

// If you try to set HTML, it will be treated as plain text.
statusDiv.textContent = '<strong>This is not bold.</strong>';

note

This is the best practice for any situation where you are working with plain text.

Replacing with HTML (Powerful but with a Security Warning)

If you need to insert and render actual HTML markup, the innerHTML property is the tool for the job.

For example, we want to replace the content of a div with a new, structured HTML element.

<div id="container">Old content</div>

The Solution: element.innerHTML

const container = document.getElementById('container');

container.innerHTML = '<span style="color: green;">Success!</span>';

danger

CRITICAL SECURITY WARNING: Never use innerHTML with content that comes from a user or an untrusted source. If a user provides a string like <script>...malicious code...</script>, setting it with innerHTML will execute that script. This is a major security vulnerability known as Cross-Site Scripting (XSS). Only use innerHTML with trusted, static HTML or sanitized data.

Part 2: Adding Content to an Element (Appending/Prepending)

If you want to add new content without deleting what's already there, the insertAdjacentText and insertAdjacentHTML methods are the modern best practice. They provide precise control over where the new content is added.

The position Parameter

Both methods take a position string as their first argument:

• 'beforebegin': Before the element itself.
• 'afterbegin': Just inside the element, before its first child (prepend).
• 'beforeend': Just inside the element, after its last child (append).
• 'afterend': After the element itself.

Adding Plain Text (Safe)

const container = document.getElementById('container'); // Contains 'Success!'
container.insertAdjacentText('beforeend', ' (Task complete)');
// container.innerHTML is now '<span style="color: green;">Success!</span> (Task complete)'

Adding HTML

const container = document.getElementById('container');
container.insertAdjacentHTML('afterbegin', '<em>Status:</em> ');
// container.innerHTML is now '<em>Status:</em> <span style="color: green;">Success!</span>'

note

Remember that insertAdjacentHTML carries the same XSS security risks as innerHTML.

Conclusion: Which Method Should You Use?

Choosing the right method is simple if you know your goal.

Your Goal	Recommended Method	Why?
Replace with plain text	element.textContent	Safest, most direct method for text.
Replace with HTML	element.innerHTML	Powerful, but has security risks. Use with caution.
Add (append/prepend) plain text	element.insertAdjacentText()	Safe and precise control over placement.
Add (append/prepend) HTML	element.insertAdjacentHTML()	Powerful, but has security risks. Use with caution.

For most common tasks, like updating a label or a message, textContent is the best and safest choice.