The difference between innerText and innerHtml

innerText and innerHtml are text messages between printed labels

1. innerText prints the plain text information between tags, which will filter out the tags. The lower version of Firefox does not support textContent, but supports 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.     //Print the plain text information between labels, and the labels will be filtered out
  18.     var str = box.innerText;      
  19.     console.log(str);  
  20. </script>  
  21. </html>  

The result is

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


2. innerHtml prints content between labels, including labels and text information, which are supported by all browsers, but higher versions will 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 label and text information
  18.     var str = box.innerHTML;  
  19.     console.log(str);  
  20. </script>  
  21. </html>  

The result is

  1. <p>This is the P label < / P >
  2. <p>This is the P label < / P >
  3. <p>This is the P label < / 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 p label < / P > < p > this is p label < / P >
  4. </div>  

The result is

  1. <p>This is the P label < / P >
  2. <p>This is p-tag < / P > < p > this is p-tag < / P >


However, using innerText will have compatibility. The lower version of Firefox does not support using, but supports using textContent. Therefore, we need to encapsulate a compatible version and call methods

  1. <pre class="html" name="code">//Get object of label
  2.     var box = document.getElementById("box");  
  3. //Call method
  4.     var str = getText(box);  
  5.     console.log(str);  
  6.     /**  
  7.      * It encapsulates a text compatible version function to get the text information 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 support
  14.         }else {  
  15.             return element.textContent; //Lower version of Firefox support
  16.         }  
  17.     } 

Keywords: Firefox

Added by pesale86 on Fri, 20 Mar 2020 19:07:48 +0200

Popular Keywords

©2024 Programming VIP