
- HTML Home
- HTML Roadmap
- HTML Introduction
- HTML History & Evolution
- HTML Editors
- HTML Basic Tags
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Fonts
- HTML Blocks
- HTML Style Sheet
- HTML Formatting
- HTML Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Frames
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Code Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Table Headers & Captions
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB & RGBA Colors
- HTML - HEX Colors
- HTML - HSL & HSLA Colors
- HTML - HSL Color Picker
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - Document Object Model (DOM)
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Character Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - DOM textContent Property
The HTML DOM textContent property is used to access and update the text content of an HTML element and all its child elements as a single string.
When you accseed the textContent, it returns the combined text of the element and its descendants, excluding any HTML tags.
Syntax
Following is the syntax of the HTML DOM textContent (to access the content) property −
element.textContent;
To update the existing HTML content with new content, use the following syntax −
element.textContent = new_text;
Where the new_text, is a text to update the element's content.
Parameters
This property does not accept any parameter.
Return Value
The textContent property returns a string value that holds the all the text found within an HTML element and all its child elements. If no text found, it returns 'null'.
Example 1: Updating Text Content
The following is the basic example of the HTML DOM textContent property. It updates the text content of <h1> element −
<!DOCTYPE html> <html lang="en"> <head> <title>HTML DOM textContent</title> <style> button{ padding: 8px 10px; } </style> </head> <body> <h2>textContent Property</h2> <p>Click the below button to change its text content..</p> <h1 id="myHeading">Hello from Us</h1> <button onclick="updateText()">Change Text</button> <script> function updateText() { // Get the element by its ID var Us=document.getElementById('myHeading'); // Update the text content Us.textContent='Welcome to Our Website'; } </script> </body> </html>
The above program update the text content of "h1" element, when the button is clicked.
Example 2: Displaying Combined Text Content
Following is another example of the HTML DOM textContent property. We use this property to access and display the combined text content of the<div> element, including all its child elements −
<!DOCTYPE html> <html lang="en"> <head> <title>HTML DOM textContent</title> <style> button{ padding: 8px 10px; } </style> </head> <body> <p>It displays the text content of div element.</p> <div id="myDiv"> <p>This is a <span>paragraph</span> with <strong>strong</strong> emphasis. </p> </div> <button onclick="displayText()">Display Text Content</button> <p id="textContentDisplay"></p> <script> function displayText() { var ele=document.getElementById('myDiv'); // Retrieve and display the text content var textcon = ele.textContent; document.getElementById('textContentDisplay').textContent = 'Text Content: ' + textcon; } </script> </body> </html>
Example 3: Checking for Empty Content
In the example below, the textContent property is used to check the text content of the <div> element. If no text content is found, it displays "No text content found. Otherwise, it displays the accessible text content −
<!DOCTYPE html> <html lang="en"> <head> <title>HTML DOM textContent</title> <style> button{ padding: 8px 10px; } </style> </head> <body> <p>Checking for empty content..</p> <div id="myDiv"></div> <button onclick="checkContent()">Check Content</button> <p id="contentStatus"></p> <script> function checkContent() { var ele=document.getElementById('myDiv'); // Check if text content exists var textContent = ele.textContent; if (textContent === '') { document.getElementById ('contentStatus').textContent = 'No text content found.'; } else { document.getElementById ('contentStatus').textContent = 'Text Content: ' + textContent; } } </script> </body> </html>
Supported Browsers
Property | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
textContent | Yes | Yes | Yes | Yes | Yes |