HTML5学堂-码匠 HTML5学堂

您当前位于:DOM 文档操作 ——> innerHTML、outerHTML与innerText、outerText

innerHTML、outerHTML与innerText、outerText

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

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中放置<style>标签,正常浏览器能够执行样式,但是IE8-不执行

4、不支持innerHTML的标签

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

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

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS