innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候,都是只针对一点进行描述,所以很难完全理解这些的字面含义以及区别点。
一、区别描述如下:(书上形式的说法)
- innerHTML设置或获取位于对象起始和结束标签内的 HTML
- outerHTML设置或获取对象及其内容的 HTML 形式
- innerText 设置或获取位于对象起始和结束标签内的文本
- outerText 设置(包括标签)或获取(不包括标签)对象的文本
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset= 'utf-8'>
- <title>HTML5自由者</title>
- </head>
- <body>
- <div id="test1">这是div中的文字<span>这是span中的文字</span></div>
- <script type="text/javascript">
- console.log('innerHTML:'+test1.innerHTML);
- console.log('outerHTML:'+test1.outerHTML);
- console.log('innerText:'+test1.innerText);
- console.log('outerText:'+test1.outerText);
- </script>
- </body>
- </html>
innerHTML:这是div中的文字<span>这是span中的文字</span>
outerHTML:<div id="test1">这是div中的文字<span>这是span中的文字</span></div>
innerText:这是div中的文字这是span中的文字
outerText:这是div中的文字这是span中的文字
|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset= 'utf-8'>
- <title>HTML5自由者——innerHTML、outerHTML和innerText、outerHTML的区别</title>
- <script language="JavaScript" type="text/javascript">
- //.innerHTML
- function innerHTMLDemo()
- {
- test_id1.innerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
- }
- //.innerText
- function innerTextDemo()
- {
- test_id2.innerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
- }
- //.outerHTML
- function outerHTMLDemo()
- {
- test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
- }
- //.outerText
- function outerTextDemo()
- {
- test_id4.outerText="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
- }
- </script>
- </head>
- <body>
- <ul>
- <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
- <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
- <li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
- <li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
- </ul>
- </body>
- </html>
运行结果:鼠标点击li列表显示不同的样式,我们来一起一 个一个点击看看会发生什么现在,
- <font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>
再来看看通过谷歌浏览器调试工具我们来看看【innerHTML】结构是怎样的?
也就是说,innerHTMl在设置对象文本内容的时候,有插入标签,是直接把字体大小,颜色 斜体 下划线这些样式显现出来。
② outerHTML点击后显示结果:(跟innerHTMl效果一样。)是直接把字体大小,颜色 斜体 下划线这些样式显现出来。
③ innerText 跟outerText 显示结果是直接把" "里的内容包括标签原封不动的设置显示出来(如下图)
总结: inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.
四、兼容性区别
注意: W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)
使用innerHTML插入<script>的时候,不会执行相应代码,但是在IE8以及之前版本浏览器中,能够执行,但需要满足一些执行条件:
innerHTML、outerHTML、innerText、outerText的区别及兼容性问题的更多相关文章
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML/outerHTML; innerText/outerText; textContent
innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
- innerHTML、innerText和outerHTML、outerText的区别
区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- innerHTML outerHTML innerText
迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...
- innerHTML、innerText、outerHTML、outerText的区别
我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...
- outerHTML、innerHTML以及innerText三者的区别
- value,innerHTML,innerText之间的区别
value:是DOM对象的属性.主要用于获取单标签的属性,(针对单标签): innerHEML:用于获取闭合双标签里面的内容,(可以识别标签): innerText:用于获取闭合单标签里面的内容,(不 ...
随机推荐
- CF11D A Simple Task 状压DP
传送门 \(N \leq 19\)-- 不难想到一个状压:设\(f_{i,j,k}\)表示开头为\(i\).结尾为\(j\).经过的点数二进制下为\(k\)的简单路总数,贡献答案就看\(i,j\)之间 ...
- Luogu4768 NOI2018 归程 最短路、Kruskal重构树
传送门 题意:给出一个$N$个点.$M$条边的图,每条边有长度和海拔,$Q$组询问,每一次询问从$v$开始,经过海拔超过$p$的边所能到达的所有点中到点$1$的最短路的最小值,强制在线.$N \leq ...
- (原创)odoo关系字段在视图中的行为控制 总结
字段类型 选项或属性 格式示例 描述 many2one , many2many_tags(widget) no_create options='{"no_create":True} ...
- Spring Cloud 入门教程(十):和RabbitMQ的整合 -- 消息总线Spring Cloud Netflix Bus
在本教程第三讲Spring Cloud 入门教程(三): 配置自动刷新中,通过POST方式向客户端发送/refresh请求, 可以让客户端获取到配置的最新变化.但试想一下, 在分布式系统中,如果存在很 ...
- CSS文本实例
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等.#############################CSS 文本属性属 ...
- python报错问题解决:'ascii' codec can't encode character
之前部署了openstack虚拟化环境,有一天在使用nova list查看虚拟机的时候,突然报错!如下: [root@linux-node1 src]# nova listERROR (Unicode ...
- vue项目环境搭建
安装node.js $ npm install -g vue-cli $ vue init webpack my-project ?Project name ?Project description ...
- vue element ui 导航刷新 is-active
<el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...
- beta阶段测试基本概况对应机型硬件信息
机型测试概况 测试结果 测试终端数 品牌分布分析 系统分布分析 分辨率分布 未执行 1 联想 4.0.3 480*800 安装失败 1 联想 4.2.1 480*854 通过 119 华为, 三星, ...
- linux内核分析程序破解实践报告