,,详谈innerHTML innerText的使用和区别

,,详谈innerHTML innerText的使用和区别

下面小编就为大家带来innerHTML innerText的使用和区别的详细讨论。我觉得边肖挺好的。我现在就分享给你,给你一个参考。来和边肖一起看看吧。

文档对象中有两个属性innerHTML、innerText,都是获取文档对象的文本内容,只是使用方式不同;

1) innerHTML设置或获取标签中包含的HTML文本信息(从标签的起始位置到结束位置的所有内容,包括HTML标签,但不包括其本身)

2) outerHTML设置或获取标签本身及其包含的HTML文本信息(包括本身)

3) innerText设置或获取标签中包含的文本信息(从标签的开始位置到结束位置的内容,不包括HTML标签,但不包括其本身)

4) outerText设置或获取标签本身及其包含的文本信息(包括本身)

innerText和outerText在获取时具有相同的效果,但是在设置时,InnerText只设置标签中包含的文本,而outerText设置包含标签自身在内的文本。

示例代码:

示例1:

通过IE浏览器打开,弹出的内容是' hello world '和' hello world '

通过火狐浏览器打开,弹出的内容是' hello world '和' undefined '

通过chrome浏览器打开,弹出的内容是' hello world '和' hello world '

弹出警告(content . outer html):' p id=' P1 ' hello world/p '

示例2

通过IE浏览器打开,弹出的内容是' p id='p1'hello world/p '和' hello world '

通过火狐浏览器打开,弹出的内容是' p id='p1'hello world/p '和' undefined '

通过chrome浏览器打开,弹出内容为' p id='p1'hello world/p '和' hello world '

弹出警告(content . outer html):' div id=' D1 ' p id=' P1 ' hello world/p/div '

综上:所有浏览器都支持innerHTML。IE浏览器支持innerText,但Firefox浏览器不支持。

不同之处:

innerHTML和outerHTML设置标签之间的内容时,会解析包含的html而内文本和外文本不会;

2) innerHTML和innerText只设置标签之间的文本,outerHTML和outerText设置包含自己标签的文本。

以上关于innerHTML innerText的使用和区别的详细讨论,就是边肖分享的全部内容。希望给大家一个参考,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: