Difference between textContent and innerHTML
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" > w3wiki </ 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 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 |