html5 innerhtml标签,innerHTML、outerHTML与innerText、outerText

innerHTML、outerHTML与innerText、outerText

HTML5学堂：替换标签内容，使我们极其常用的知识，今天我们就来详细分析分析这几个属性：innerHTML、innerText、outerHTML、outerText，看看它们的区别和需要注意的地方。

内容类型角度

innerHTML outerHTML ：能够获取/设置元素的内容[元素内容可以包含标签]

innerText ourterText ：能够获取/设置元素的内容[元素内容是文本内容]

设置时的不同点

在获取时，innerHTML和outerHTML是相同的功能，但是在设置时，使用outerHTML新建的DOM树会替代掉原有的“调用元素”(即当前的调用元素会被替换)

innerText与outerText同理。

兼容角度：

outerHTML ：IE4+ FF8+ Opera8+ chrome Safari4+

innerText ：IE4+ Safari 3+ chrome Opera 8+ [旧版本FF不支持]

outerText ：IE4+ Safari 3+ chrome Opera 8+ [旧版本FF不支持]

详细说说innerHTML

1、innerHTML 获取时的大小写问题

IE和Opera 获取到的标签均为大写形式。苹果、谷歌会将内容按照原来的格式(包含空格、缩进)返回HTML(也就意味着返回后的不同内容的DOM树结构不同)

2、脚本限制

innerHTML当中插入了script标签。不会执行相应代码，但是，在IE8-，如果满足执行条件，可以执行

2.1 script标签必须指定defer属性

2.2 script标签必须位于有作用域的元素之后(如一个标签节点、一个文本节点等)

3、样式限制

innerHTML中放置

4、不支持innerHTML的标签