innerText Vs. innerHTML

by Online Tutorials Library July 22, 2014

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> TutorAspire InnerText Code using Javascript      </title>   </head>       <body style=”text-align:center;”>           <h1 style=”color:red”>TutorAspire InnerText Code using Javascript</h1>   <!– TutorAspire 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 TutorAspire </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> TutorAspire InnerHTML Code using Javascript      </title>   </head>       <body style=”text-align:center;”>           <h1 style=”color:red”>TutorAspire InnerHTML Code using Javascript</h1>   <!– TutorAspire 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 TutorAspire </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

innerText Vs. innerHTML

innerText Vs. innerHTML

innerText

innerHTML

Differene between innerText and innerHTML

Backbone.js collection.get()

Complex Java Programs

You may also like