JavaScript textContent
last modified April 2, 2025
In this article, we explore the textContent property in JavaScript.
This property is essential for working with text content in DOM elements,
providing a safe and efficient way to manipulate text.
Basic Definition
The textContent property gets or sets the text content of a node and
all its descendants. Unlike innerHTML, it doesn't parse HTML tags,
making it safer against XSS attacks.
When getting text content, textContent returns all text within the
element, including hidden elements. When setting text content, any existing
content is completely replaced with the new text.
Basic textContent Usage
This example demonstrates how to get and set text content using textContent.
<!DOCTYPE html>
<html>
<head>
<title>Basic textContent</title>
</head>
<body>
<div id="demo">Initial text content</div>
<script>
const element = document.getElementById('demo');
console.log(element.textContent); // "Initial text content"
element.textContent = 'Updated text content';
console.log(element.textContent); // "Updated text content"
</script>
</body>
</html>
In this basic example, we first get the text content of a div element and log it to the console. Then we update the text content and log the new value.
This demonstrates the fundamental usage of textContent for both
reading and writing text content. The property works with any HTML element that
can contain text.
textContent vs innerHTML
This example shows the difference between textContent and innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>textContent vs innerHTML</title>
</head>
<body>
<div id="container">
<p>Some text <span>with nested elements</span></p>
</div>
<script>
const container = document.getElementById('container');
console.log('textContent:', container.textContent);
console.log('innerHTML:', container.innerHTML);
container.textContent = '<strong>New text</strong>';
console.log('After textContent:', container.innerHTML);
</script>
</body>
</html>
Here we compare how textContent and innerHTML handle
content differently. textContent returns all text, while
innerHTML returns the HTML markup.
When we set content with textContent, HTML tags are treated as
plain text and not parsed. This makes textContent safer for user
input as it prevents XSS attacks.
textContent with Hidden Elements
This example demonstrates how textContent works with hidden elements.
<!DOCTYPE html>
<html>
<head>
<title>textContent with Hidden Elements</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div id="content">
Visible text
<span class="hidden">Hidden text</span>
</div>
<script>
const content = document.getElementById('content');
console.log(content.textContent); // "Visible text Hidden text"
</script>
</body>
</html>
In this example, we have a div containing both visible and hidden text.
textContent retrieves all text content regardless of visibility.
This behavior is different from innerText which only returns
visible text. textContent is more consistent as it always returns
all text content in the DOM tree.
Clearing Element Content
This example shows how to use textContent to clear element content.
<!DOCTYPE html>
<html>
<head>
<title>Clearing Content</title>
</head>
<body>
<div id="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<button onclick="clearContent()">Clear Content</button>
<script>
function clearContent() {
const list = document.getElementById('list');
list.textContent = '';
}
</script>
</body>
</html>
Here we have a list of items and a button. When clicked, the button clears all
content inside the list container using textContent.
Setting textContent to an empty string is an efficient way to
remove all child nodes from an element. It's faster than removing nodes
individually and safer than using innerHTML with empty string.
Performance Considerations
This example demonstrates the performance benefits of textContent.
<!DOCTYPE html>
<html>
<head>
<title>Performance Test</title>
</head>
<body>
<div id="test">Initial content</div>
<button onclick="runTest()">Run Performance Test</button>
<div id="results"></div>
<script>
function runTest() {
const element = document.getElementById('test');
const results = document.getElementById('results');
const iterations = 10000;
// Test textContent
let start = performance.now();
for (let i = 0; i < iterations; i++) {
element.textContent = 'textContent ' + i;
}
let textContentTime = performance.now() - start;
// Test innerHTML
start = performance.now();
for (let i = 0; i < iterations; i++) {
element.innerHTML = 'innerHTML ' + i;
}
let innerHTMLTime = performance.now() - start;
results.innerHTML = `
<p>textContent: ${textContentTime.toFixed(2)}ms</p>
<p>innerHTML: ${innerHTMLTime.toFixed(2)}ms</p>
`;
}
</script>
</body>
</html>
This example compares the performance of textContent versus
innerHTML when updating element content repeatedly.
textContent is generally faster as it doesn't parse HTML.
The performance difference becomes more noticeable with frequent updates or
large amounts of content. For simple text updates,
textContent should be preferred for better performance.
Source
In this article, we have explored the textContent property in
JavaScript. This property is essential for safe and efficient text manipulation
in web development.
Author
List all JS DOM tutorials.