Skip to content
Related Articles

Related Articles

Difference between textContent and innerHTML

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 17 Dec, 2020

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


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.
  • The innerHTML property: This property is used to get or set the HTML content of an element.


<!DOCTYPE html>
<body style="text-align:center;">
    <h1 style="color:#006600">
    <div id="test-btn">
        The following element contains some
        <bold>bold</bold> and
        some <italic>italic text</italic>.
    <button onClick="innerHTMLfn()">
    <button onClick="textContentfn()">
    <p id="demo-para"></p>
        function textContentfn() {
            var elem =
        function innerHTMLfn() {
            var elem =


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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!