Ever feel like DOM manipulation gets messy? Let’s untangle the web of innerHTML, innerText, and textContent – and become SEO masters!

When it comes to manipulating the content of HTML elements with JavaScript, developers often encounter the trio: innerHTML, innerText, and textContent. While they might seem interchangeable, each has distinct behaviors and use cases. Let’s unravel the differences and understand when to reach for each tool in your web development toolbox.

1. innerHTML: The Content Magician

The innerHTML property is like a magic wand for changing the content of an HTML element. It allows you to get or set the HTML content of an element, including any HTML tags. This means you can inject new HTML structure or modify existing content effortlessly. For dynamic content insertion with formatting

const element = document.getElementById('exampleElement');
element.innerHTML = '<strong>Hello, World!</strong>';

2. innerText: The Plain Text Whisperer

If you only care about the text content of an element, excluding any HTML tags, innerText is your go-to option. It provides a way to access or modify only the textual content within an element, making it perfect for scenarios where HTML tags are irrelevant. For extracting pure text content

const element = document.getElementById('exampleElement');
element.innerText = 'Hello, World!';

3. textContent: The All-Inclusive Scribe

Enter textContent, the property that includes both text and HTML content within an element. It represents the combined text content of all elements, including nested ones, without interpreting the HTML. While similar to innerText, it doesn’t consider styles or layout, making it a robust option for text extraction. For working with text and basic formatting

const element = document.getElementById('exampleElement');
element.textContent = 'Hello, <em>World</em>!';

Summary

Here’s a breakdown of the key phrases “innerHTML”, “innerText”, and “textContent” in JavaScript, incorporating visuals for clarity:

innerHTML:

• Retrieves and sets the HTML content of an element, including tags.
• Directly modifies the DOM structure.
• Can be used to inject HTML content dynamically.
• Caution: Use with care due to security risks if not properly sanitized.

innerText:

• Retrieves and sets the visible text content of an element, as it appears on the screen.
• Ignores hidden elements and styling.
• Useful for displaying text to the user without formatting.

textContent:

• Retrieves and sets the text content of an element and its descendants, including hidden elements.
• Ignores styling.
• Preserves whitespace and line breaks.
• Useful for working with raw text data.

Demo