What is the difference between innerText and innerHTML?

This tutorial explains the key differences between innerText and innerHTML in JavaScript, focusing on how they manipulate the content of DOM elements. Understanding these differences is crucial for efficient and secure web development.

Basic Definition

innerText and innerHTML are properties used to get or set the text content of an HTML element. However, they differ significantly in how they handle the content and what kind of content they can manipulate.

innerText: Pure Text

innerText gets or sets only the visible text content of an element. It ignores any HTML tags within the element. When setting content, it treats the input as plain text, escaping any HTML entities. Importantly, innerText is aware of styles applied via CSS and will only return text that is rendered to the screen. Hidden text (e.g., text hidden using CSS `display: none`) will not be included.

const element = document.getElementById('myElement');

// Setting text
element.innerText = 'Hello, world!';

// Getting text
const text = element.innerText;
console.log(text); // Output: Hello, world!

innerHTML: HTML Content

innerHTML gets or sets the HTML markup contained within an element. This includes HTML tags, attributes, and text. When setting content, the input is parsed as HTML, allowing you to inject new elements into the DOM. Getting the innerHTML returns the serialized HTML fragment of the element's content.

const element = document.getElementById('myElement');

// Setting HTML content
element.innerHTML = '<p>This is a <strong>paragraph</strong>.</p>';

// Getting HTML content
const html = element.innerHTML;
console.log(html); // Output: <p>This is a <strong>paragraph</strong>.</p>

Key Differences Summarized

• innerText: Treats content as plain text, ignoring and escaping HTML tags. Only retrieves visible text.
• innerHTML: Treats content as HTML markup, allowing insertion of HTML elements. Retrieves the entire HTML content including tags.

Security Considerations (innerHTML)

Using innerHTML to insert content obtained from untrusted sources can lead to Cross-Site Scripting (XSS) vulnerabilities. If a malicious user can inject script tags into the HTML you're setting, they can execute arbitrary code on your website. Always sanitize user-provided input before using it with innerHTML or use safer alternatives like `textContent` along with DOM manipulation methods like `createElement` and `appendChild`.

When to Use them

• Use innerText when you only need to manipulate plain text content and security is paramount.
• Use innerHTML when you need to insert or retrieve HTML markup, but be extremely cautious about the source of the HTML.

Best Practices

• Security First: Prioritize security by sanitizing user input before using innerHTML or explore safer alternatives.
• Performance: Repeatedly modifying innerHTML can lead to performance issues as the browser needs to re-parse the HTML. Consider using DOM manipulation methods for complex updates.
• Readability: Choose the method that best reflects your intent. If you only need to work with text, innerText improves readability.

Alternatives

For safer and more controlled DOM manipulation, consider these alternatives:

• textContent: Similar to innerText but retrieves the content of all elements, including those hidden with CSS. It doesn't re-render HTML. This is almost always the preferred choice over `innerText`.
• createElement, createTextNode, appendChild: These methods allow you to create and add elements to the DOM programmatically, providing fine-grained control and avoiding the security risks associated with innerHTML.
• insertAdjacentHTML: Allows you to insert HTML at specific positions relative to an existing element (beforeBegin, afterBegin, beforeEnd, afterEnd). Safer than directly setting `innerHTML` as it doesn't replace the entire contents.

Real-Life Use Case Section

innerText: Displaying a user's name or a simple message on a webpage where the content is guaranteed to be plain text. innerHTML: Building a dynamic table from data received from an API, where you need to create table rows and cells (<tr>, <td>) based on the data.

Interview Tip

During interviews, be prepared to discuss the security implications of using innerHTML and alternative approaches for manipulating the DOM safely. Emphasize your understanding of XSS vulnerabilities and best practices for mitigating them.