innerText 与 innerHtml的区别

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

       

posted @ 2018-06-28 18:06  认真度过每一天  阅读(117)  评论(0)    收藏  举报