What is the difference between innerHTML & innerText?

In this tutorial, I will show you What is the difference between innerHTML & innerText.What is the difference between inner HTML & inner Text?

What is the difference between inner HTML & inner Text?expoundsofttechsolution

innerHTML – Returns the innerHTML property text, which includes all spacing and inner element tags. It preserves the formatting of the text and all the extra tags like , etc.

innerText – The innerText property returns only text, removing the spacing and inner element tags.

Following is the code for innerHTML and innerText in JavaScript –

Syntax: element.innerText 

Code:

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
        innerText
    </title>   
</head>     
<body>   
    <div id="demo">   
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.<codes> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</codes>  <italic>when an unknown printer took a galley of type and scrambled it to make a type specimen book</italic>.
    </div>   
    <p></p>   
    <button onClick="innerTextFunction()">   
        innerText   
    </button>   
    <p id="op"></p>   
    <script>   
        function innerTextFunction() {   
            var x = document.getElementById('demo');   
            alert(x.innerText);   
        }    
    </script>         
</body>       
</html>

Syntax: element.innerHTML 

Code:

<!DOCTYPE html>   
<html>    
<head>   
    <title>   
        innerHTML  
    </title>   
</head>   
<body>   
    <div id="demo">   
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.<codes> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</codes>  <italic>when an unknown printer took a galley of type and scrambled it to make a type specimen book</italic>.
    </div>   
    <p></p>   
    <button onClick="innerHTMLFunction()">   
        innerHTML   
    </button>   
    <p id="op"></p>      
    <script>   
        function innerHTMLFunction() {   
            var x = document.getElementById('demo');   
            alert(x.innerHTML);   
        }         
    </script>   
</body>       
</html>

Differene between innerText and innerHTML

As we can see from the above example innerText property or return text content as plain text of specified node, and all its descendants, while innerHTML property gets and sets plaintext or HTML content in elements. Unlike innerText, innerHTML lets you work with HTML-rich text and doesn’t automatically encode and decode the text.

Hope this blog is helpful for you ,Thanks for reading this blog.

What is the difference between inner HTML & inner Text?