Javascript 中innerHTML和innerText的区别

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

真哥沉默思考人生

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

阅读量1.4k

点赞数

分类专栏： Javascript 文章标签： javascript 区别 innerHTML innerText

本文链接：https://blog.csdn.net/u010589037/article/details/24470447

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在学习Javascript的过程中，对innerHTML和innerText这两个方法有点混淆，看了下兄弟连的js部分视频，自己也做了一下小实验，发现这两个方法还是有些区别的。

区别一：首先，按字面上的意思解释，innerHTML的意思是：“内部的HTML标签”，innerText的意思是“内部的文本”。做一个输出实验就可以证明他们的区别。

在IE浏览器下：

使用innerHTML：

<html>
<body>
<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>
<script>
var aobj=document.getElementById("alink");
alert(aobj.innerHtml);
</script>
</body>
</html>



结果：

       

 使用innerText：

<html>

<body>

<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>

<script>

var aobj=document.getElementById("alink");

aobj.innerHTML="<h1>google</h1>";

alert(aobj.innerText);

</script>

</body>

</html>

        结果：

        区别二：二者对IE和火狐的兼容性不同。

        innerHTML是兼容IE和火狐的，

        用innerHTML设置值并输出，代码如下：

<html>

<body>

<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>

<script>

var aobj=document.getElementById("alink");

aobj.innerHTML="<h1>google</h1>";

alert(aobj.innerHTML);



</script>

</body>

</html>

          在火狐和IE中都是这个结果：

          innerText就不能兼容IE和火狐了。

          在IE中，之前的“baidu”被修改为google，弹出的值也是google，只是加粗<b>不能显示。

<html>

<body>

<a id="alink" href="http://www.brophp.com" target="_blank" title="this is test"><b>baidu</b></a>

<script>

var aobj=document.getElementById("alink");

aobj.href="www.baidu.com"

aobj.innerText="google";

alert(aobj.innerText);



</script>

</body>

</html>

            结果如图：

            

          在火狐中，同样的代码同上

           结果如图：

           

            并不能将之前的值设置为新的值。 若将下面这行代码屏蔽

     //  aobj.innerText="google";

            则输出的是“undefined”。如图：

            

            但是，在IE和火狐中可以使用另一个方法：textContent。textContent方法对IE和火狐是兼容的，    

           代码：   

<html>

<body>

<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>

<script>

var aobj=document.getElementById("alink");

aobj.textContent="google";

  alert(aobj.textContent);



</script>

</body>

</html>

            输出的结果都是：

           

            若要使用innerText方法，并使火狐和IE兼容，可以写一个转换函数。

          这是兄弟连高老师写的一个函数：

<html>

<body>

<a id="alink" href="www.baidu.com" target="_blank" title="this is test">test</a>

<script>

var aobj=document.getElementById("alink");

ffie(aobj, "wwwwwwwwwwwww");

alert(ffie(aobj));

function ffie(obj, value){

if(document.all){

if(typeof(value)=="undefined")   

return obj.innerText;

else

obj.innerText=value;

}else{

if(typeof(value)=="undefined")

return obj.textContent;

else

obj.textContent=value;

}

}





</script>

</body>

</html>





特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：





<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>