How do I change the text of an element using JavaScript?

The safe path: Using textContent

Opt for textContent for simple, reliable text changes. Because text parsing is not required with textContent, you prevent potential XSS vulnerabilities associated with user-submitted data:

document.getElementById('myElement').textContent = 'Security pass!'; // Pew pew!


Focusing on an element with a specific ID offers precision for efficient DOM manipulation.

The cautious creator: Using textNode

For a fortress-like approach, create a textNode and append it to the appropriate element:

let textOfSteel = document.createTextNode('Try to penetrate this!'); // It's 100% gluten-free too
document.getElementById('myElement').replaceChild(textOfSteel, document.getElementById('myElement').firstChild);


This approach secures your application from unplanned security breaches and is ideal when dealing with sensitive user content.

A pinch of jQuery

If jQuery is a companion on your journey, you can change the text more concisely:

$('#myElement').text('Swift and spicy'); // Talk about flavor!


It's as secure and efficient as textContent, though it comes with some jQuery syntax magic.

The careful cook: Using innerHTML with user inputs

Watch out for potential XSS vulnerabilities when using innerHTML with user inputs:

document.getElementById('userContent').innerHTML = userInput; //Hand sanitizer not included


Avoid innerHTML by using textContent or sanitize user inputs diligently. Better safe than sorry, especially when it comes to user-submitted content!

Cast your compatibility net: textContent vs innerText

Use innerText when you need to respect CSS visibility styles. However, innerText is not the friendliest with all browsers, unlike textContent:

document.getElementById('myElement').innerText = 'Fabulous with a twist!';


Pick innerText for stylish results and textContent for cross-browser compatibility and consistency.

Time for a change: Efficiently updating your text

Improve your user experience with dynamic updates in response to user interactions:

document.getElementById('welcomeMessage').textContent = `Welcome back, ${userName}!`; // What?! They know my name!


Bring life to your website by authoring interactive, dynamic user experiences.

The field changer: Updating form inputs

Remember, when manipulating form and input fields, opt for the value property:

document.getElementById('myInput').value = 'New shiny value'; //  New year, new me!


Your users' input experience stays consistent and efficient.