分享

innerText 与 innerHtml的区别 (一)

 复杂网络621 2018-05-04

innerText  与 innerHtml 都是打印标签之间的文本信息

1、innerText 打印标签之间的纯文本信息,会将标签过滤掉,低版本的火狐浏览器不支持,而是支持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>这是P标签</p>  
  10.         <p>这是P标签</p>  
  11.         <p>这是P标签</p>  
  12.     </div>  
  13. </body>  
  14.   
  15. <script>  
  16.     var box = document.getElementById("box");  
  17.     //打印标签之间的纯文本信息,会将标签过滤掉  
  18.     var str = box.innerText;      
  19.     console.log(str);  
  20. </script>  
  21. </html>  

打印结果是

  1. 这是P标签  
  2.   
  3. 这是P标签  
  4.   
  5. 这是P标签  


2、innerHtml 打印标签之间的内容,包括标签和文本信息,各浏览器都支持,但是高版本的浏览器会原样打印

  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>这是P标签</p>  
  10.         <p>这是P标签</p>  
  11.         <p>这是P标签</p>  
  12.     </div>  
  13. </body>  
  14.   
  15. <script>  
  16.     var box = document.getElementById("box");  
  17.     //打印标签之间的内容,包括标签和文本信息  
  18.     var str = box.innerHTML;  
  19.     console.log(str);  
  20. </script>  
  21. </html>  

打印结果是

  1. <p>这是P标签</p>  
  2. <p>这是P标签</p>  
  3. <p>这是P标签</p>  

如果将div中的p标签不换行,打印的结果会原样输出

  1. <div id="box">  
  2.      <p>这是P标签</p>  
  3.      <p>这是P标签</p><p>这是P标签</p>  
  4. </div>  

打印结果是

  1. <p>这是P标签</p>  
  2. <p>这是P标签</p><p>这是P标签</p>  


但是使用innerText 会有兼容性,低版本的火狐浏览器不支持使用,而是支持使用textContent,因此我们需要封装一个兼容版本,以及调用方法

  1. <pre class="html" name="code">//    获取标签的对象  
  2.     var box = document.getElementById("box");  
  3. //    调用方法  
  4.     var str = getText(box);  
  5.     console.log(str);  
  6.     /**  
  7.      * 封装了一个获取标签之间的文本信息兼容版本函数  
  8.      * @param element 标签对象  
  9.      * @returns {*}  
  10.      */  
  11.     function getText(element) {  
  12.         if(element.innerText) {  
  13.             return element.innerText;   //IE8及之前的浏览器支持,现在两者都支持  
  14.         }else {  
  15.             return element.textContent; //低版本的火狐支持  
  16.         }  
  17.     }  







    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多