Difference between textContent and innerHTML
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.
- The innerHTML property: This property is used to get or set the HTML content of an element.
- Before any button is clicked:
- After the innerHTML button is clicked:
- After the textContent button is clicked:
Differences: As we can see from the example above, the innerHTML property gets or sets 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.