innerText Vs. innerHTML

innerText and innerHTML are the properties of JavaScript.

innerText

innerText is used to print the plain text information between tags and requires some layout system information. It also ignores the space.

Syntax:

Code:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaTpoint InnerText Code using Javascript
    </title> 
</head> 
  	
<body style="text-align:center;"> 
    
  <h1 style="color:red">JavaTpoint InnerText Code using Javascript</h1> 
<!-- JavaTpoint innerText code start from here, Here from you can take any element according to your choice. -->
    <div id="tpoint"> 
        The following element contains some 
        <codes>codes like welcome to javatpoint</codes> and 
        <italic>some text like my javascript code</italic>. 
    </div> 
    <p></p> 
    <button onClick="innerTextFunction()"> 
        innerText 
    </button> 
    <p id="op"></p> 
    <script> 
        function innerTextFunction() { 
            var x = document.getElementById('tpoint'); 
            alert(x.innerText); 
        } 
  
        
    </script> 
	
</body> 
  
</html>

innerHTML

innerHTML is used to print content between labels, including text information. Cross site security attaks are the main disadvantage of innerHTML.

Syntax:

Code:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaTpoint InnerHTML Code using Javascript
    </title> 
</head> 
  	
<body style="text-align:center;"> 
    
  <h1 style="color:red">JavaTpoint InnerHTML Code using Javascript</h1> 
<!-- JavaTpoint innerHTML code start from here, Here from you can take any element according to your choice. -->
  
    <div id="tpoint"> 
        The following element contains some 
        <codes>codes like welcome to javatpoint</codes> and 
        <italic>some text like my javascript code</italic>. 
    </div> 
    <p></p> 
    <button onClick="innerHTMLFunction()"> 
        innerHTML 
    </button> 
<!--  innerHTML code end from here -->    
    <p id="op"></p> 
 
    <script> 
        function innerHTMLFunction() { 
            var x = document.getElementById('tpoint'); 
            alert(x.innerHTML); 
        } 
  
        
    </script> 
</body> 
  
</html>

Differene between innerText and innerHTML

The below table shows the differene between innerText and innerHTML -

innerText	innerHTML
Retrieves and sets the content in plain text.	Retrieves and sets the content in HTML format.
We can not insert the HTML tags.	We can insert the HTML tags.
It ignores the spaces.	It considers the spaces.
It returns text without an inner element tag.	It returns a tag with an inner element tag.

Next TopicDifference between

← prev next →