打开APP
userphoto
未登录

开通VIP，畅享免费电子书等14项超值服

开通VIP

首页

好书

留言交流

下载APP

联系客服
innerText 与 innerHtml的区别 （一）
userphoto 关注

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.     }  










本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。





打开APP，阅读全文并永久保存
查看更多类似文章







猜你喜欢












类似文章




【热】打开小程序，算一算2024你的财运
JS实现HTML标签转义及反转义
加快 DHTML 的一组技巧
textContent、innerText、innerHTML属性
JavaScript innerText与innerHtml与value的区别
JS基础--常见的输入输出语句
contentEditable



更多类似文章 >>













生活服务


















热点新闻


























留言交流


回顶部


联系我们










分享
收藏
导长图
关注

下载文章






绑定账号成功
后续可登录账号畅享VIP特权！


如果VIP功能使用有故障，
可点击这里联系客服！
联系客服