微信扫一扫打赏支持

textContent和innerText属性的区别

textContent和innerText属性的区别

一、总结

一句话总结：

^、textContent 属性设置或者返回指定节点的文本内容。如果你设置了 textContent 属性, 任何的子节点会被移除及被指定的字符串的文本节点替换。
^、innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>
            </title>
        </meta>
    </head>
    <body>
        <div class="test" id="test">
            test
            <div style="display:none">
                <span>
                    test
                </span>
            </div>
            <p>
                hi
            </p>
        </div>
        <script type="text/javascript">
        var testDiv = document.getElementById('test');
        console.log("我是textContent输出的"+testDiv.textContent);
        console.log("我是innerText输出的"+testDiv.innerText);
        </script>
    </body>
</html>

输出结果：

我是textContent输出的
            test


                    test



                hi


我是innerText输出的test
hi

 

 

 

二、textContent和innerText属性的区别

转自或参考：textContent和innerText属性的区别
https://blog.csdn.net/dexing07/article/details/77947333

 

 

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>
            </title>
        </meta>
    </head>
    <body>
        <div class="test" id="test">
            test
            <div style="display:none">
                <span>
                    test
                </span>
            </div>
            <p>
                hi
            </p>
        </div>
        <script type="text/javascript">
        var testDiv = document.getElementById('test');
        console.log("我是textContent输出的"+testDiv.textContent);
        console.log("我是innerText输出的"+testDiv.innerText);
        </script>
    </body>
</html>

输出结果：

我是textContent输出的
            test


                    test



                hi


我是innerText输出的test
hi

 

 

 

1.主要差异
- textContent 会获取style= “display:none” 中的文本，而innerText不会
- textContent 会获取style标签里面的文本，而innerText

差异：
1. textContent不会理会html格式，直接输出不换行的文本
2. innerText会根据标签里面的元素独立一行

3.兼容性：
innerText 对IE的兼容性较好
textContent虽然作为标准方法但是只支持IE8+以上的浏览器

 

 

 
posted @ 2020-04-17 06:37  范仁义  阅读(641)  评论(3)  编辑  收藏  举报