JavaScript innerText
last modified April 2, 2025
In this article, we explore the innerText property in JavaScript.
This property is essential for working with text content of DOM elements,
providing a simple way to get or set human-readable text.
Basic Definition
The innerText property represents the rendered text content of a
node and its descendants. It returns only the visible text, ignoring hidden
elements and preserving spacing and line breaks.
Unlike textContent, innerText is aware of styling and
CSS. It won't return text from hidden elements and will respect visual layout
including line breaks caused by CSS.
Basic innerText Usage
This example demonstrates how to get and set text content using innerText.
<!DOCTYPE html>
<html>
<head>
<title>Basic innerText</title>
</head>
<body>
<div id="content">Hello <span>World</span>!</div>
<button onclick="showText()">Show Text</button>
<script>
function showText() {
const element = document.getElementById('content');
alert(element.innerText);
}
</script>
</body>
</html>
In this basic example, we have a div element containing text and a span. When
the button is clicked, the showText function retrieves the element
and displays its text content using innerText.
The alert will show "Hello World!" because innerText combines all
visible text content, including text within child elements. It preserves the
space between words but ignores HTML tags.
innerText vs textContent
This example demonstrates the difference between innerText and textContent.
<!DOCTYPE html>
<html>
<head>
<title>innerText vs textContent</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div id="example">
Visible text
<span class="hidden">Hidden text</span>
<div>More text</div>
</div>
<script>
const element = document.getElementById('example');
console.log('innerText:', element.innerText);
console.log('textContent:', element.textContent);
</script>
</body>
</html>
This example shows a div with both visible and hidden text content. The
JavaScript logs both innerText and textContent values.
innerText will return only "Visible text More text" while
textContent will include the hidden text. Also,
innerText is more performance-heavy as it requires layout
information.
Setting Text with innerText
This example shows how to set text content using innerText.
<!DOCTYPE html>
<html>
<head>
<title>Setting Text</title>
</head>
<body>
<div id="output">Original content</div>
<button onclick="updateText()">Update Text</button>
<script>
function updateText() {
const output = document.getElementById('output');
output.innerText = 'New content with\nline breaks';
}
</script>
</body>
</html>
Here we have a div element and a button. When clicked, the button updates the
div's content using innerText with a string containing a newline.
The newline character in the string will be rendered as an actual line break in
the HTML because innerText preserves whitespace and line breaks
when setting content. This differs from HTML parsing behavior.
innerText with Formatted Content
This example demonstrates how innerText handles formatted content.
<!DOCTYPE html>
<html>
<head>
<title>Formatted Content</title>
</head>
<body>
<div id="formatted" style="white-space: pre-wrap;">
This text has extra spaces
And multiple
lines
</div>
<button onclick="showFormattedText()">Show Text</button>
<script>
function showFormattedText() {
const element = document.getElementById('formatted');
alert(element.innerText);
}
</script>
</body>
</html>
This example shows a div with extra spaces and line breaks, styled with
white-space: pre-wrap. The button displays the text using
innerText.
The alert will show the text exactly as rendered, with preserved spaces and line
breaks. This demonstrates how innerText respects the visual
presentation of text, including CSS styling that affects text layout.
Security Considerations
This example shows why innerText is safer than innerHTML for user content.
<!DOCTYPE html>
<html>
<head>
<title>Security Example</title>
</head>
<body>
<div id="safeOutput"></div>
<div id="unsafeOutput"></div>
<button onclick="testSecurity()">Test Security</button>
<script>
function testSecurity() {
const userInput = '<script>alert("XSS")</script>';
document.getElementById('safeOutput').innerText = userInput;
document.getElementById('unsafeOutput').innerHTML = userInput;
}
</script>
</body>
</html>
This example compares innerText and innerHTML when
handling potentially malicious user input. The button triggers both methods.
The innerText version will display the script tags as text,
preventing XSS attacks. The innerHTML version would attempt to
execute the script. This shows why innerText is safer for
user-generated content.
Source
In this article, we have shown how to use the innerText property
in JavaScript. This property is essential for safely working with text content
in web development.
Author
List all JS DOM tutorials.