innerText，textContent，innerHTML兼容问题和return区别

最新推荐文章于 2023-12-15 23:14:09 发布

原创最新推荐文章于 2023-12-15 23:14:09 发布 · 911 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ECMAJavaScript #JavaScript浏览器兼容 #HTML5 #web前端

web前端专栏收录该内容

42 篇文章

订阅专栏

本文探讨了JavaScript中innerText、textContent和innerHTML在处理DOM元素内容时的兼容性问题和使用差异。在IE8等低版本浏览器中，innerText表现良好，而textContent在IE上的兼容性得到验证。innerText返回文本内容，innerHTML则获取或设置元素的HTML内容。在插入内容时，innerText将HTML标签转义，而innerHTML能正确解析并插入HTML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、兼容问题

*innerText，textContent，innerHTML*这三个方法都是用于网页中插入数据，比较常用的还是innerHTML因为他比较兼容也比较符合标准；但是他们之间在本质上还是有一定的区别，在低版本浏览器上会出现兼容问题，textContent是火狐定义的ie8不支持，innerText是ie定义的低版本火狐不支持下面我来做一些示例：
先定义一个按钮和一个div：

<input type="button" id="btn" value="点击添加文字" />
<div id="dv" style="height: 150px; width: 300px; border: 2px solid red">我是div</div>

下面是js代码：

//先来个全局定义
function my$(id) {
    return document.getElementById(id);
};
       my$("dv".onclick=function (){
           document.getElementById("dv").textContent="this is DIV";
           console.log(my$("dv").textContent);
       };

火狐和谷歌都没问题下面让让我们来看看ie8
这里写图片描述
我们可以看到ie8 浏览器并没有改变div里面的内容且字符类型是undefined

既然这样的话我没来试一试，他们自家的innerText（火狐和谷歌是没问题的这里就不上图了）

js代码：

my$("btn").onclick=function () {   
        my$("dv").innerText="我是DIV";
         console.log(my$("dv").innerText);

        };

ie8
我们可以看到innerText对于低版本的ie是可以解析的

 *结论*：从上我们可以得出低版本浏览器解析不了的话字符类型就会是undefined，innerText，textContent对于火狐和ie低版本相互不兼容，那我们何不做一个兼容代码判断undefined来做到兼容的方法：

set方法：

   function setInnerText(element,text) {
            //判断浏览器是否支持这个属性
            if(typeof element.textContent =="undefined"){//不支持
                element.innerText=text;
            }else{//支持这个属性
                element.textContent=text;
            }
        }

get方法：

        function getInnerText(element) {
            if(typeof element.textContent=="undefined"){
                return element.innerText;
            }else{
                return element.textContent;
            }
        };

让我们来测试下刚的兼容性代码这里就只展示textContent在IE的的效果举了：
获取：

my$("btn").onclick=function () {
            console.log(getInnerText(my$("dv")));
        };

这里写图片描述

成功获取到

下面我们来看看set

 my$("btn").onclick=function () {
            //setInnerText(my$("dv"),"哈哈,我回来了");
        };

这里写图片描述

ie8也成功设值

=================================================================================================================================================

兼容问题解决了让我们来看下他们3个标签在使用上又有什么区别吧！

二、使用上的区别

老规矩先上样式代码

<input type="button" id="btn1" value="点击获取便签内容" />
<div id="dv1" style="width: 300px;height: 200px;border:2px solid deeppink">
    我是div的内容
    <p>我是div里面的p标签里面的内容</p>
</div>

这里我定义了一个按钮和一个包含一个p标签的div，div和p里面都各自有内容，下面我将用这三个标签来获取里面的内容来看一下各自有什么区别
innerText：

my$("btn1").onclick=function () {
        console.log(my$("dv1").innerText);
    }

这里写图片描述
我们可以看到 innerText 得到的是div和p 里面的文字内容

.innerHTML：

my$("btn1").onclick=function () {
          console.log(my$("dv1").innerHTML);
    };

这里写图片描述
.innerHTML 获取到的是真正意义上div里面所有的内容

下面我们用方法给div里面插入标签和内容

innerText方法插入

my$("btn").onclick=function () {
        my$("dv").innerText="<p>我是p标签</p>";
    };

这里写图片描述
并没有达到我们想要的效果他把p标签的尖括号变成转意符给插入进去了

innerHTML方法插入

 my$("btn").onclick=function () {
        my$("dv").innerHTML="<p>我是p标签</p>";
    };

这里写图片描述
我们可以看到innerHTML是可以达到我们想要的效果的p标签并没有被转成字符，而是被浏览器解析而且innerHTML是标准协议在低版本ie上面也能被解析

结论：

innerText可以获取标签中的文本内容，但是标签中还有标签，那么最里面的标签的内容也被获取；在插入内容时如果内容中包含了html标签，标签并不会被浏览器解析，而是被转换
innerHTML才是真正的获取标签中所有的内容 -包括标签；在插入内容时如果内容包含了html标签，html标签会被浏览器解析，从而在网页上有标签效果；