Difference between textContent and innerHTML
Last Updated :
21 Feb, 2023
The textContent and innerHTML are properties of JavaScript. However, there are differences in the way the specified text is handled in JavaScript. Let us take a look at the syntax of both of these properties.
Syntax:
Let elem be a JavaScript variable that holds an element that is selected from the page.
let elem = document.getElementById('test-btn');
The textContent and innerHTML properties can be used as follows:
The textContent property: This property is used to get or set the text content of the specified node and its descendants.
elem.textContent
The innerHTML property: This property is used to get or set the HTML content of an element.
elem.innerHTML
Example: This example shows the difference between the innerHTML and textContent properties of DOM.
HTML
<body style="text-align:center;">
<h1 style="color:#006600">
GeeksforGeeks
</h1>
<div id="test-btn">
The following element contains some
<bold>bold</bold> and
some <italic>italic text</italic>.
</div>
<p></p>
<button onClick="innerHTMLfn()">
innerHTML
</button>
<button onClick="textContentfn()">
textContent
</button>
<p id="demo-para"></p>
<script>
function textContentfn() {
var elem =
document.getElementById('test-btn');
alert(elem.textContent);
}
function innerHTMLfn() {
var elem =
document.getElementById('test-btn');
alert(elem.innerHTML);
}
</script>
</body>
|
Output:
Difference between textContent and innerHTML
Difference Table:
|
innerHTML
|
textContent
|
| The innerHTML property gets or sets the HTML contents of the element |
The textContent does not automatically encode and decode text and hence allows us to work with only the content part of the element |
Share your thoughts in the comments
Please Login to comment...