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...