Problem Statement
What is the difference between innerHTML, textContent, and innerText?
Explanation
InnerHTML gets or sets the HTML content including all tags. It parses HTML, so it is slower but more powerful. Use it when you need to insert HTML elements.
TextContent gets or sets all text content without HTML parsing. It is faster and safer than innerHTML. It includes text from hidden elements and script tags. Use it for plain text to avoid XSS attacks.
InnerText gets only visible text, respecting CSS styling. It triggers reflow, so it is the slowest. Hidden elements are excluded. It considers line breaks and formatting.
For security, always use textContent for user input to prevent XSS. Use innerHTML only for trusted content. InnerText is useful when you need visible text only.
Understanding these differences prevents security issues and performance problems.
Code Solution
SolutionRead Only
const div = document.getElementById('demo');
// Assume: <div id="demo">Hello <span style="display:none">Hidden</span> <b>World</b></div>
// innerHTML - includes HTML tags
console.log(div.innerHTML);
// 'Hello <span style="display:none">Hidden</span> <b>World</b>'
// textContent - all text, no HTML
console.log(div.textContent);
// 'Hello Hidden World' (includes hidden text)
// innerText - visible text only
console.log(div.innerText);
// 'Hello World' (excludes hidden text)
// SETTING CONTENT
// innerHTML - can add HTML elements
div.innerHTML = '<p>New <strong>content</strong></p>';
// Creates actual <p> and <strong> elements
// textContent - adds as plain text
div.textContent = '<p>New content</p>';
// Displays literally: <p>New content</p>
// innerText - adds as plain text with formatting
div.innerText = 'Line 1\nLine 2';
// Respects line breaks
// SECURITY - XSS Attack Prevention
const userInput = '<img src=x onerror="alert(\'XSS\')"> ';
// UNSAFE - executes script!
// div.innerHTML = userInput; // Alert pops up!
// SAFE - displays as text
div.textContent = userInput;
// Shows: <img src=x onerror="alert('XSS')">
// PERFORMANCE
console.time('innerHTML');
for (let i = 0; i < 1000; i++) {
div.innerHTML = 'Test';
}
console.timeEnd('innerHTML'); // Slowest (parses HTML)
console.time('textContent');
for (let i = 0; i < 1000; i++) {
div.textContent = 'Test';
}
console.timeEnd('textContent'); // Fastest
console.time('innerText');
for (let i = 0; i < 1000; i++) {
div.innerText = 'Test';
}
console.timeEnd('innerText'); // Slow (triggers reflow)
// PRACTICAL EXAMPLES
// Get form input safely
const username = document.getElementById('username').value;
document.getElementById('greeting').textContent = `Hello, ${username}`;
// Safe from XSS
// Insert HTML from template
const template = '<div class="card"><h3>Title</h3></div>';
document.getElementById('container').innerHTML = template;
// Use only for trusted content
// Get visible text for copying
const article = document.getElementById('article');
const visibleText = article.innerText;
// Excludes hidden content, good for copy function