The difference between innerText and innerHtml

Posted by adaykin on Wed, 18 Mar 2020 17:27:50 +0100

Both innerText and innerHtml are text messages between print labels

1. innerText prints plain text information between tags, which filters out the tags. Low versions of Firefox browser do not support textContent.

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.     <div id="box">  
  9.         <p>This is P Label</p>  
  10.         <p>This is P Label</p>  
  11.         <p>This is P Label</p>  
  12.     </div>  
  13. </body>  
  14.   
  15. <script>  
  16.     var box = document.getElementById("box");  
  17.     //Printing plain text information between labels will filter out the labels.
  18.     var str = box.innerText;      
  19.     console.log(str);  
  20. </script>  
  21. </html>  

Print results

  1. This is the P label.
  2.   
  3. This is the P label.
  4.   
  5. This is the P label.


2. innerHtml prints the contents between tags, including tags and text information, which are supported by all browsers, but older browsers print as is

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.     <div id="box">  
  9.         <p>This is P Label</p>  
  10.         <p>This is P Label</p>  
  11.         <p>This is P Label</p>  
  12.     </div>  
  13. </body>  
  14.   
  15. <script>  
  16.     var box = document.getElementById("box");  
  17.     //Print content between labels, including labels and text information
  18.     var str = box.innerHTML;  
  19.     console.log(str);  
  20. </script>  
  21. </html>  

Print results

  1. <p>This is label P</p>.
  2. <p>This is label P</p>.
  3. <p>This is label P</p>.

If the p label in the div is not wrapped, the printed result will be output as is

  1. <div id="box">  
  2. < p > This is the P label </p>.
  3. <p>This is the P label</p><p>This is the P label</p>.
  4. </div>  

Print results

  1. <p>This is label P</p>.
  2. <p>This is label P</p><p>This is label P</p>.


However, it is compatible to use innerText. Lower versions of Firefox browser do not support it, but rather textContent, so we need to encapsulate a compatible version and call methods

  1. <pre class="html" name="code">//Objects to get labels
  2.     var box = document.getElementById("box");  
  3. //Call Method
  4.     var str = getText(box);  
  5.     console.log(str);  
  6.     /**  
  7.      * Encapsulates a version function to get text information compatibility between tags.
  8.      * @param element Label object
  9.      * @returns {*}  
  10.      */  
  11.     function getText(element) {  
  12.         if(element.innerText) {  
  13.             return element.innerText;   //IE8 and previous browser support, now both.
  14.         }else {  
  15.             return element.textContent; //Low version of Firefox support
  16.         }  
  17.     }  

            

    

        
Topics:
            Firefox
        

            

        
Hot Topics



 

        

    




    ©2024 Programmer Think