Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between textContent and innerHTML
There are various methods used in web development to change the text or add additional elements to an HTML element's content. textContent and innerHTML are two frequently used properties for changing an HTML element's content. Although these two properties might appear to be identical, they have distinct behaviors and applications.
The textContent property sets or retrieves the text content of an element and all of its descendants without any HTML tags. In contrast, the innerHTML property sets or retrieves an element's HTML content, including all HTML tags and their associated attributes. By adding new elements or modifying existing ones, innerHTML enables you to edit an element's structure as well as its text.
What is textContent?
The textContent property represents the text content of an HTML element and all its descendants. When you use textContent, you can get or set the text content without including any HTML tags or their attributes.
For example, if you have an HTML element like this:
<p>This is some <em>text</em> content.</p>
The textContent property would return the string "This is some text content." without any markup tags.
Example: Using textContent
<!DOCTYPE html>
<html>
<body>
<div id="myElement">
<p>This is some <strong>formatted</strong> text.</p>
</div>
<script>
var element = document.getElementById("myElement");
// Get the text content of the element
console.log("textContent:", element.textContent);
// Set new text content
element.textContent = "New plain text content";
console.log("After setting textContent:", element.textContent);
</script>
</body>
</html>
textContent: This is some formatted text. After setting textContent: New plain text content
What is innerHTML?
The innerHTML property represents the HTML markup content of an element and all its descendants, including all HTML tags and attributes. You can modify both the text content and the HTML structure using innerHTML.
For example, if you have this HTML element:
<div id="myElement"><p>This is some <em>text</em> content.</p></div>
The innerHTML property would return the complete HTML content including the <p> and <em> tags.
Example: Using innerHTML
<!DOCTYPE html>
<html>
<body>
<div id="myElement">
<p>This is some <strong>formatted</strong> text.</p>
</div>
<script>
var element = document.getElementById("myElement");
// Get the HTML content of the element
console.log("innerHTML:", element.innerHTML);
// Set new HTML content
element.innerHTML = "<p>New <em>HTML</em> content</p>";
console.log("After setting innerHTML:", element.innerHTML);
</script>
</body>
</html>
innerHTML: <p>This is some <strong>formatted</strong> text.</p> After setting innerHTML: <p>New <em>HTML</em> content</p>
Security Comparison
textContent is safer because it treats everything as plain text and doesn't execute scripts. innerHTML can be a security risk with user-generated content:
<!DOCTYPE html>
<html>
<body>
<div id="safe"></div>
<div id="unsafe"></div>
<script>
var maliciousInput = "<img src='x' onerror='alert("XSS Attack!")'>";
// Safe: textContent escapes HTML
document.getElementById("safe").textContent = maliciousInput;
console.log("textContent result:", document.getElementById("safe").textContent);
// Unsafe: innerHTML executes HTML (commented out for safety)
// document.getElementById("unsafe").innerHTML = maliciousInput;
</script>
</body>
</html>
textContent result: <img src='x' onerror='alert("XSS Attack!")'>
Performance Comparison
textContent is generally faster because it doesn't need to parse HTML markup, while innerHTML requires the browser to parse and re-render HTML content.
Comparison Table
| Property | textContent | innerHTML |
|---|---|---|
| Content Type | Plain text only | HTML markup with tags |
| HTML Tags | Removes/ignores tags | Preserves and interprets tags |
| Security | Safe - escapes HTML | Can execute scripts (XSS risk) |
| Performance | Faster | Slower (needs HTML parsing) |
| Use Case | Plain text manipulation | HTML structure modification |
When to Use Each
Use textContent when:
- You need to set or get plain text content
- Working with user input that should be treated as text
- Security is a concern
- Performance is critical
Use innerHTML when:
- You need to add HTML elements dynamically
- You want to preserve formatting and structure
- Content comes from trusted sources
- You need to modify the DOM structure
Conclusion
Choose textContent for safe, fast text manipulation and innerHTML for HTML structure changes. Always consider security implications when using innerHTML with user-generated content.
661 Views
