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
innerHTML vs innerText in JavaScript.
The innerHTML and innerText properties are two different ways to access and manipulate the content of HTML elements in JavaScript.
innerHTML - Returns or sets the HTML markup inside an element, including all tags, formatting, and spacing. It preserves the complete HTML structure.
innerText - Returns or sets only the visible text content, stripping out all HTML tags and normalizing whitespace.
Key Differences
| Property | HTML Tags | Whitespace | Hidden Elements |
|---|---|---|---|
innerHTML |
Preserved | Preserved | Included |
innerText |
Removed | Normalized | Excluded |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML vs innerText</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.sample {
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.result {
background-color: #e8f5e8;
padding: 10px;
margin: 5px 0;
border-left: 4px solid #4CAF50;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>innerHTML vs innerText Demo</h1>
<div class="sample">
Hello <b>World</b> <i>Some Text</i>
<span style="display:none;">Hidden content</span>
</div>
<button onclick="showDifference()">Show Difference</button>
<div id="innerHTML-result" class="result"></div>
<div id="innerText-result" class="result"></div>
<script>
function showDifference() {
const sampleElement = document.querySelector('.sample');
// Display innerHTML result
document.getElementById('innerHTML-result').innerHTML =
'<strong>innerHTML:</strong> ' + sampleElement.innerHTML;
// Display innerText result
document.getElementById('innerText-result').innerHTML =
'<strong>innerText:</strong> ' + sampleElement.innerText;
}
</script>
</body>
</html>
Output
When you click the "Show Difference" button, you'll see:
innerHTML: Hello <b>World</b> <i>Some Text</i> <span style="display:none;">Hidden content</span> innerText: Hello World Some Text
Common Use Cases
Use innerHTML when:
- You need to insert HTML markup
- Working with rich content that includes formatting
- Building dynamic HTML structures
Use innerText when:
- You only need plain text content
- Displaying user input safely (prevents XSS attacks)
- Getting readable text for accessibility or processing
Security Considerations
Be cautious when using innerHTML with user input, as it can lead to XSS vulnerabilities. innerText is safer for displaying user-generated content since it treats everything as plain text.
Conclusion
Use innerHTML when you need to work with HTML markup and innerText when you only need plain text content. Choose innerText for better security when handling user input.
1K+ Views
