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

最新推荐文章于 2021-10-21 20:36:05 发布

$(薛定谔的喵)

最新推荐文章于 2021-10-21 20:36:05 发布

阅读量846

点赞数

分类专栏： web前端文章标签： ECMAJavaScript JavaScript浏览器兼容 HTML5 web前端

本文链接：https://blog.csdn.net/Chad97/article/details/81938883

版权

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

摘要由CSDN通过智能技术生成

一、兼容问题

*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);
       };