innerHTML、outerHTML与innerText、outerText

2016/04/26 15:24:26 | 作者：HTML5学堂（码匠） | 分类：DOM文档操作 | 关键词：修改标签内容,innerHTML,outerHTML

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不支持]

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

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

2.1 script标签必须指定defer属性

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

innerHTML中放置<style>标签，正常浏览器能够执行样式，但是IE8-不执行

<col> <colgroup> <html> <head> <style> <table> <tbody> <tfoot> <thead> <tr> <title>(IE8-)

HTML5学堂小编-利利耗时1h

欢迎沟通交流~HTML5学堂

HTML5学堂微信