what is the difference between innerHTML and innerText and textContent

Great question! These three properties are commonly confused but have important differences in how they handle HTML content.

textContent- Gets ALL Text

​Gets the raw text content, including hidden text and script/style content:

<div id="example">
  Hello <span style="display:none">Hidden Text</span> World!
  <script>console.log('hidden script')</script>
</div>

const div = document.getElementById('example');

console.log(div.textContent);
// "Hello Hidden Text World! console.log('hidden script')"

innerText- Gets VISIBLE Text

​Gets only rendered, visible text​ (respects CSS styling):

console.log(div.innerText);
// "Hello World!" - ignores hidden content

innerHTML- Gets/Sets HTML

​Gets or sets the HTML markup​ inside the element:

console.log(div.innerHTML);
// "Hello <span style="display:none">Hidden Text</span> World!
// <script>console.log('hidden script')</script>"

Key Differences Table

Property	Gets	Sets	CSS Aware	Performance	Security
textContent	All text	Raw text	❌ No	✅ Fastest	✅ Safe
innerText	Visible text	Text only	✅ Yes	❌ Slowest	✅ Safe
innerHTML	HTML markup	HTML markup	❌ No	✅ Fast	❌ XSS Risk

Setting Values - Important Differences

textContent- Escapes HTML

// HTML is escaped and treated as text
element.textContent = "<script>alert('XSS')</script>";
// Result: &lt;script&gt;alert('XSS')&lt;/script&gt;
// Displayed as: <script>alert('XSS')</script>

innerText- Also escapes HTML

// Similar to textContent for setting
element.innerText = "<strong>Hello</strong>";
// Result: &lt;strong&gt;Hello&lt;/strong&gt;

innerHTML- Parses HTML

// HTML is parsed and rendered
element.innerHTML = "<strong>Hello</strong>";
// Result: Hello (in bold)

Performance Considerations

innerTextis the slowest because it:

• Triggers reflow (layout recalculation)

• Checks CSS visibility

• Respects line breaks and styling

// Benchmark example (fastest to slowest):
element.textContent = 'text';    // Fastest
element.innerHTML = 'text';      // Fast  
element.innerText = 'text';      // Slowest (triggers reflow)

Practical Examples

Example 1: Basic Usage

<div id="demo">
  Hello   World!
  <span style="display: none">Hidden</span>
  <script>var x = 1;</script>
</div>

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

console.log(demo.textContent);
// "Hello   World! Hidden var x = 1;" (preserves whitespace)

console.log(demo.innerText);
// "Hello World!" (collapses whitespace, ignores hidden)

console.log(demo.innerHTML);
// "Hello   World! <span style="display: none">Hidden</span> <script>var x = 1;</script>"

Example 2: Line Breaks

<div>Line 1<br>Line 2</div>

textContent: "Line 1Line 2"      // No line break
innerText:   "Line 1\nLine 2"   // Includes line break

Security Warning ⚠️

​Never use innerHTMLwith user input:​​

// ❌ DANGEROUS - XSS vulnerability!
element.innerHTML = userInput;

// ✅ SAFE alternatives
element.textContent = userInput;
element.innerText = userInput;

When to Use Which?

Use textContentwhen:

• You want all text content (including hidden)

• Performance matters

• Setting plain text safely

Use innerTextwhen:

• You need only visible, rendered text

• CSS-aware text retrieval is needed

• You care about text formatting

Use innerHTMLwhen:

• You need to insert/modify HTML structure

• You control the content (not user input)

• Working with trusted HTML strings

Best Practices

// For getting text:
const text = element.textContent; // Usually preferred
const visibleText = element.innerText; // If you need CSS awareness

// For setting text safely:
element.textContent = userInput; // Prevents XSS

// For setting HTML (only with trusted content):
element.innerHTML = '<div>Safe HTML</div>';

​Rule of thumb: Use textContentfor most cases, innerTextwhen you need CSS awareness, and innerHTMLsparingly with trusted content only.