Gagan BN's Blog

Difference between innerHTML, innerText and textConte

Gagan BN's photo
Gagan BN
·

5 min read

innerHTML:

The innerHTML property is a part of DOM that allows the javascript code to manipulate a website being displayed.

Using the innerHTML property we can either get or set or even replace the content of an HTML element.

Note: It is recommended to use textContent when inserting plaintext and not to use innerHTML.

E.g.:-

Getting the content of an HTML element.

<html>
<head>
<title> Document </title>
</head>
<body>
  <ul id='myul'>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
  </ul>
<script>
  var u = document.getElementById('myul');
  console.log(u);
  console.log(u.innerHTML)
</script>
</body>
</html>

Here by considering the above code when we do a console.log(u); then we will be getting the entire content of the element ul with id 'myul' even including the ul tag.

i.e.: In the console:-

<ul id='myul'>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

but if we do console.log(u.innerHTML); then we will get the content inside the HTML tag

    with the id 'myul'.

    i.e.:

    <li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>

    This is an example of getting the content of an element using the innerHTML property.

    Now let's see how we can

    Set or replace the content using the innerHTML.

    Now inside the script tag i.e.:

    <script>
var u = document.getElementById('myul');
u.innerHTML = '  ';
console.log(u.innerHTML);
</script>

    Here we know that the ul tag with the id 'myul' had some items like

    <li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>

    But since we have used:

    u.innerHTML = ' ';

    The above will set the content of ul tag to an empty string and when you do

    console.log(u.innerHTML);

    then you will not find anything in the console since we have assigned ul with an empty string.

    Considering the same script and we will make some changes in u.innerHTML.

    u.innerHTML = "<li>JavaScript</li>
               <li>HTML</li>
               <li>CSS</li>";

    Now when you refresh your web page you can see the changes.

    i.e.:

    The default content of the ul tag was:

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    But now you will get a replaced content of

    • Javascript
    • HTML
    • CSS

    This is how we can set or replace the content of any element in HTML using the innerHTML property.

    innerText:

    The innerText property of JavaScript is used to get or set the text inside an HTML element. The innerText has a similar working phenomenon to innerHTML both properties manipulate the content of an HTML element but innerText mainly concentrates on the text content.

    Consider the same code as before but a small change with the script tag.

    <script>
var u =document.getElementById('myul');
console.log(u.innerText);
</script>

    Now if we do a console.log(u.innerText); then we will only get the text content that is inside the ul tag. i.e.:

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    Note:

    innerText does not return markup that is why you will not see the li tag in both the web page or console. If you had used innerHTML you will be able to see the li tag along with the item in the console but on the web page, you will only see the items but not the tags.

    Now to set content using innerText

    <script>
var u = document.getElementById('myul');
u.innerText = 'This is a text';
</script>

    Now we know that by default we had some items inside the ul tag but now we are setting the content of ul to "This is a text";

    Now if you do a console.log(u.innerText); you will get:

    This is a text in the console.

    If you change the u.innerText as below

    u.innerText = '<span>This is a text</span>';

    Then you will get an output of <span>This is a text</span>.

    Because innerText will convert everything into text even the tags.

    textContent:

    The textContent property is used to set or return the text content of an element. This property returns the text of all child nodes but without tags.

    <html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <p id='myp'>  This is <span>Para</span> <em>graph</em></p>

  <script>
  </script>
   </body>
</html>

    Now if we view it on a web page we will see the below

    This is paragraph

    In the above, we see the difference between span tag and em tag where we have graph inside em so it is displayed with italic style.

    Now let's make some changes inside the script.

    i.e.:

    <script>
var p = document.getElementById('myp');
console.log(p.textContent);
console.log(p);
p.textContent = 'Hello world';
</script>

    Now if we do a console.log(p); then we will get the below output with all the tags we have used.

    i.e.:

    <p id='myp'>  This is <span>Para</span> <em>graph</em></p>

    Now if we used text content and do a console.log(p.textContent); we will get the below output.

    i.e.:

    This is a paragraph.

    Here we can clearly see that it has removed all the tags and has only extracted the text content that is present inside the p tag with the id 'myp'.

    Now if we use:

    p.textContent = 'Hello World';

    By default, we know that we were getting the output in the webpage as

    This is a paragraph

    But now we will get the output as

    Hello world

    Because the text content will replace output and we will see Hello world as the new output.

HTML5JavaScript