Difference between innerHTML, outerHTML, innerText, outerText in Javascript

Updated on: June 14, 2021

innerHTML, outerHTML, innerText, outerText are the HTML Element's property which we can use in JavaScript to modify the Html Content and text of an HTML element. innerHTML and outerHTML helps to modify the HTML content of an element whereas innerText and outerText helps to modify the text of an element. 

innerHTML: innerHTML property in JavaScript helps to get the entire HTML content of an element and also helps to replace the entire HTML content inside of an element as shown below:

Below HTML we have a div with id "innerHtmlElement" which has <h4> tag and in the page we have "Change Content" button, on click of it we are going to change the innerHTML of "innerHtmlElement" div.

  1. <html>
  2. <head><title>Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4.      <div id="innerHtmlElement"><h4>Inner HTML Element</h4></div>
  5.      <div><input type="button" onclick="ChangeContent();" value="Change Content"/></div>
  6.      <script>
  7.          var innerHtmlElm = document.getElementById('innerHtmlElement');
  8.          function ChangeContent(){
  9.              console.log('Old Content: '+innerHtmlElm.innerHTML);
  10.              innerHtmlElm.innerHTML='<h4>Inner HTML Element Content is Changed</h4>';
  11.          }
  12.     </script>
  13. </body>
  14. </html>

After clicking on "Change Content" button, the innerHTML of the "div with id innerHtmlElement" is replaced with the new HTML code, as shown below it got replaced with new <h5> tag and it will display on page with new h5 heading style

  1. <html>
  2. <head><title>innerHTML Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4.      <div id="innerHtmlElement"><h5>Inner HTML Element Content is Changed</h5></div>
  5.      <div><input type="button" onclick="ChangeContent();" value="Change Content"></div>
  6.      <script>
  7.           var innerHtmlElm = document.getElementById('innerHtmlElement');
  8.           function ChangeContent(){
  9.                console.log('Old Content: '+innerHtmlElm.innerHTML); //outputs: Old Content: <h4>Inner HTML Element</h4>
  10.                innerHtmlElm.innerHTML='<h5>Inner HTML Element Content is Changed</h5>';
  11.           }
  12.      </script>
  13. </body>
  14. </html>

You can see with innerHTML, line number 4 content is changed, below is the output shown after changing the innerHTML

outerHTML: outerHTML helps to replace the element with the new HTML element, it will render the element and give it's default styling to the contents inside the new element.

As shown below, on click on "Change Content" button, we are going to change the outerHTML of a div with id "outerHtmlElement":

  1. <html>
  2. <head><title>outerHTML Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4. <div id="outerHtmlElement"><h4>Outer HTML Element</h4></div>
  5. <div><input type="button" onclick="ChangeContent();" value="Change Content"></div>
  6. <script>
  7. var outerHtmlElm = document.getElementById('outerHtmlElement');
  8. function ChangeContent(){
  9. console.log('Old Content: '+outerHtmlElm.innerHTML);
  10. outerHtmlElm.outerHTML='<h5>Outer HTML Element Content is Changed</h5>';
  11. }
  12. </script>
  13. </body></html>

After clicking on "Change Content" button, it replaced the "div#outerHtmlElement" with new "<h5>" tag and it will apply the h5 heading styles to the content inside the <h5> tag, now on the page we don't have any div element with id as "outerHtmlElement" because we replaced it with new <h5> tag by using outerHTML property.

  1. <html>
  2. <head><title>outerHTML Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4. <h5>Outer HTML Element Content is Changed</h5>
  5. <div><input type="button" onclick="ChangeContent();" value="Change Content"></div>
  6. <script>
  7. var outerHtmlElm = document.getElementById('outerHtmlElement');
  8. function ChangeContent(){
  9. console.log('Old Content: '+outerHtmlElm.innerHTML);
  10. outerHtmlElm.outerHTML='<h5>Outer HTML Element Content is Changed</h5>';
  11. }
  12. </script>
  13. </body></html>

See the below output, when we changed the HTML content using outerHTML:

innerText: innerText helps to set the replace the entire inside HTML content of any element with the new text, it will render the text as it is. even if you specify any tag as text, it will render as it is on the browser without any styles.

As shown in the below HTML, JavaScript code, We are going to apply the innerText to "div#innerTextHtmlElement":

  1. <html>
  2. <head><title>innerText Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4. <div id="innerTextHtmlElement"><h4>innerText HTML Element</h4></div>
  5. <div><input type="button" onclick="ChangeContent();" value="Change Content"/></div>
  6. <script>
  7. var innerTextElm = document.getElementById('innerTextHtmlElement');
  8. function ChangeContent(){
  9. console.log('Old Content: '+innerTextElm.innerHTML);
  10. innerTextElm.innerText = '<h5>InnerText HTML Element Content is Changed</h5>';
  11. }
  12. </script>
  13. </body>
  14. </html>

After clicking on "Change Content" button, the entire content of "div#innerTextHtmlElement" is replaced with the new text. Even if we put any HTML tag in the new text, it will just show the tag on the browser as it is in plain text without any styling.

  1. <html>
  2. <head><title>innerText Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4. <div id="innerTextHtmlElement"><h5>Inner HTML Element Content is Changed</h5></div>
  5. <div><input type="button" onclick="ChangeContent();" value="Change Content"></div>
  6. <script>
  7. var innerTextElm = document.getElementById('innerTextHtmlElement');
  8. function ChangeContent(){
  9. console.log('Old Content: '+innerTextElm.innerHTML);
  10. innerTextElm.innerText = '<h5>InnerText HTML Element Content is Changed</h5>';
  11. }
  12. </script>
  13. </body></html>

We can see in the below HTML output page, the new text is rendered as it is, it didn't apply any stying to the new content of the "div#innerTextHtmlElement":

outerText: outerText replaces an element with the new text content passed to outerText property. As shown in the below HTML code, we are going to change the outerText of a div element with id "outerTextHtmlElement"

  1. <html>
  2. <head><title>outerText Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4. <div id="outerTextHtmlElement"><h4>outerText HTML Element</h4></div>
  5. <div><input type="button" onclick="ChangeContent();" value="Change Content"/></div>
  6. <script>
  7. var outerTextElm = document.getElementById('outerTextHtmlElement');
  8. function ChangeContent(){
  9. console.log('Old Content: '+outerTextElm.outerText);
  10. outerTextElm.outerText = '<h5>OuterText HTML Element Content is Changed</h5>';
  11. }
  12. </script>
  13. </body>
  14. </html>

After clicking on "Change Content" button, it replaced the "div#outerTextHtmlElement" with new text, even if we put <h5> tag in the new text to be replaced, it displayed as it is in the plain text on the browser. Now on the HTML page, we don't have any div with id "outerTextHtmlElement" because we replaced it with the new text by using "outerText" property

  1. <html>
  2. <head><title>outerText Test Application</title></head>
  3. <body style="text-align:center;margin:20px;">
  4. " <h5>OuterText HTML Element Content is Changed</h5> "
  5. <div><input type="button" onclick="ChangeContent();" value="Change Content"></div>
  6. <script>
  7. var outerTextElm = document.getElementById('outerTextHtmlElement');
  8. function ChangeContent(){
  9. console.log('Old Content: '+outerTextElm.outerText);
  10. outerTextElm.outerText = '<h5>OuterText HTML Element Content is Changed</h5>';
  11. }
  12. </script>
  13. </body>
  14. </html>

As shown below, the "div#outerTextHtmlElement" is replaced with new text and it is shown as it is on the browser without applying any styles to it: