js中innerHTML 和 innerText 獲取內容的區別

本文轉載自查看原文 2020-01-07 17:08 1278

案例如下：

先來看一下直接效果：最大的區

innerHTML 獲取內容的時候，會把標簽也獲取到

innerText 獲取內容的時候，會把標簽過濾掉

<!DOCTYPE html>
<html>
    <head lang="en">
        <title></title>
    </head>
    <body>
      <div id="box">box</div>

      <!-- <div id="box">
          我是box里面的p標簽<p>我是一個段落</p>
      </div>
      <span></span>
      <a href=""></a>
      <p></p>
      &lt;p&gt; &nbsp; &copy; -->
        <script>
            var box = document.getElementById('box');
            // 老版本的IE支持innerText
            box.innerText = '';
            // 老版本的firefox 支持 textContent
            var a;//undefined
            var o={};
            console.log(o.a);//undefined

            //1 獲取標簽之間的內容
            // innerHTML 和 innerText 獲取內容的區別
            // innerHTML 獲取內容的時候，會把標簽也獲取到
            // innerText 獲取內容的時候，會把標簽過濾掉
            // console.log(box.innerText);
            // console.log(box.innerHTML);

            //2 設置標簽之間的內容
            //設置內容的時候，如果內容中又標簽， 會解析標簽
            // innerHTML 不是標准的dom屬性
            //box.innerHTML = 'O(∩_∩)O哈哈~<b>程序員</b><p>這是一個段落</p>'
            // 設置內容的時候，如果內容中又標簽，會對標簽進行轉義
            // 最早的IE中增加的屬性，老版本的firefox不支持屬性
            //老版本的firefox textContent
            //box.innerText = 'O(∩_∩)O哈哈~<b>程序員</b><p>這是一個段落</p>'
        </script>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS的dom獲取innerHtml和innerText的區別 js中innerHTML與innerText的用法與區別 Js—innerHTML和innerText的區別 JavaScript中innerText和innerHTML的區別 js中innerHTML和innerText的用法 js中innerText，innerHTML的用法 JS之innerHTML，innerText，outerHTML，textContent的用法與區別 js innerText、textContent、innerHTML的區別和各自用法 DOM中的outerHTML,innerHTML,outerText,innerText的區別 JavaScript中innerHTML與innerText，createTextNode的區別