在一道面试题中看到的。

1、功能讲解: 
innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式 
innerText 设置或获取位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本 
2、示例

 <html>

 <head>

 <title>Demo</title>

 <style><!--

 body {font-family:"宋体";color="blue";font-size="9pt"}

 --> </style>

 <script language="JavaScript">

 //.innerHTML

 function innerHTMLDemo()

 {

 test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";

 }

 //.innerText

 function innerTextDemo()

 {

 test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";

 }

 //.outerHTML

 function outerHTMLDemo()

 {

 test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";

 }

 //.outerText

 function outerTextDemo()

 {

 test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";

 }

 </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>

3、不同之处: 
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于： 
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。 
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 

特别说明： 
　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例： 
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

innerHTML与innerText的异同的更多相关文章

  1. JS中innerHTML，innerText，value

    一·.JS初学者易混淆的问题:innerHTML,innerText,value(他们和JQ的区别:JS→value,JQ→value()) 1.getElementById("a" ...

  2. JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  3. JS中innerHTML 和innerText和value的区别

    (1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...

  4. (转)JS中innerHTML，innerText，value

    原文:http://holysonll.blog.163.com/blog/static/21413909320134111054352/ JS中innerHTML,innerText,value 2 ...

  5. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  6. innerHTML与innerText的PK

    一.innerText属性用来定义对象所要输出的文本,在本例中innerText把对象it中的文本"您喜欢看微微一笑很倾城吗?"变成了"超级喜欢!"(语句it. ...

  7. innerHTML和innerText

    document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下. 示例1 <ht ...

  8. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  9. 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别

    测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别   我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...

随机推荐

  1. ubuntu的vim模式

    之前想修改一个文件的内容,居然发现之前的东西又随着时间在空气中淡忘了,所以取了网上的一些摘文. 1.vim #在命令行中输入vim,进入vim编辑器 2. i #按一下i键,下端显示 --INSERT ...

  2. python 虚拟环境

    python3 目录venv创建为虚拟环境,并激活. $ python3 -m venv ./venv$ source venv/bin/activate -m: -m mod : run libra ...

  3. Oracle解锁与加锁（HR用户为例)

    SQL*Plus: Release 9.2.0.4.0 - Production on Tue Jul 14 18:12:38 2009 　　Copyright (c) 1982, 2002, Ora ...

  4. 后台PageVo中字段赋值与前台datagrid字段获取

    后台PageVo中字段的geter与setter函数需根据pageVo的字段自动生成,前台字段与后台字段名保持一致. 数据返回到前台时,datagrid会根据字段名隐射到相应的getter与sette ...

  5. C++哈夫曼树编码和译码的实现

    一．背景介绍: 给定n个权值作为n个叶子结点,构造一棵二叉树,若带权路径长度达到最小,称这样的二叉树为最优二叉树,也称为哈夫曼树(Huffman Tree).哈夫曼树是带权路径长度最短的树,权值较大的 ...

  6. .NET跨平台：在Linux Ubuntu上编译coreclr/corefx/dnx（20150617）

    编译时间:北京2015年6月17日上午 操作系统:Ubuntu 14.04.2 LTS Mono版本:Mono JIT compiler version 4.3.0 (master/3445ac5 T ...

  7. .NET Core与.NET Framework、Mono之间的关系

    随着微软的.NET开源的推进,现在在.NET的实现上有了三个.NET Framework,Mono和.NET Core.经常被问起Mono的稳定性怎么样,后续Mono的前景如何,要回答这个问题就需要搞 ...

  8. 程序员的经济学系列——你不可不知的生存智慧——第一篇：小X是要成为IT精英的男人！

    21世纪,不懂经济学就是耍流氓!如何才能生活得更好?作为程序员你一定也思考过这个问题.今天我们就来从经济学中寻找这问题的答案吧! 一·PPF与机会成本 1.PPF综述 首先为大家介绍第一个最简单的经济 ...

  9. Lesson 13 The Greenwood Boys

    Text The Greenwood Boys are group of pop singers. At present, they are visiting all parts of the cou ...

  10. 剑指Offer面试题：8.斐波那契数列

    一.题目:斐波那契数列 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项.斐波那契数列的定义如下: 二.效率很低的解法 很多C/C++/C#/Java语言教科书在讲述递归函数的时 ...