← Back to all snippets
JAVASCRIPT

Managing Plain Text Content with textContent

Safely retrieve and update the plain text content of any HTML element using the `textContent` property, a secure alternative to `innerHTML` for display text.

const myParagraph = document.getElementById('myParagraph');
const myHeading = document.getElementById('myHeading');

// Get the plain text content of an element
const paragraphText = myParagraph.textContent;
console.log('Current paragraph text:', paragraphText);

// Set new plain text content
myHeading.textContent = 'Welcome, User!';
console.log('Updated heading text:', myHeading.textContent);

// Note: HTML tags will be escaped when setting textContent
// myParagraph.textContent = 'This will be <strong>bold</strong> text.';
// console.log(myParagraph.textContent); // Output: "This will be <strong>bold</strong> text."
How it works: This snippet demonstrates how to use the `textContent` property to interact with the plain text inside an HTML element. It allows you to retrieve the existing text or set new text, ensuring that any HTML tags provided in the new string are automatically escaped and displayed as literal text, providing a safer alternative to `innerHTML` for plain text updates.

Need help integrating this into your project?

Our team of expert developers can help you build your custom application from scratch.

Hire DigitalCodeLabs