在一道面试题中看到的。

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. 关于telnet源码

    Linux 下流行的 telnet 实现有两个:GNU 的 inetutils 中的实现哈佛的 netkit-telnet 1. http://ftp.gnu.org/gnu/inetutils/2. ...

  2. 关于Linux系统下错误“浮点数异常（核心已转储）”的分析

    1.问题发现 有这样一段代码: #include <stdio.h> int main() { int a, b, num1, num2, temp; printf("pleas ...

  3. 15分钟学会Lua

    lua的很多语法跟matlab很像 最基本的赋值是一样的 循环和选择判断后面必须跟一个关键字:do和then ,, do ... end if - then - end table是lua的唯一一种数 ...

  4. sass和compass的配置

    http://note.youdao.com/share/?id=4f57187f9695bcaadf80516187d2de0e&type=note 当执行安装sass出错时,可以试试这个命 ...

  5. VS2012中丢失ArcGIS模板的解决方法

    VS2012中丢失ArcGIS模板的解决方法 由于ArcGIS10.0(for .NET)默认是用VS2010作为开发工具的,所以在先安装VS2012后装ArcGIS10.0 桌面版及ArcObjec ...

  6. java web(七)Cookie的简单使用

    一.概述 测试 //1.创建一个Cookie对象    //Cookie cookie1=new Cookie("name","xrk");    //2.调用 ...

  7. 【转】Android Studio-1.2版本设置教程

    如果重新安装Android Studio的话要重新配置风格选项啥的,这篇是个很好的教程,原文链接:http://blog.csdn.net/skykingf/article/details/45485 ...

  8. iOS开发之AFNetworking 3.0.4使用

    昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...

  9. C# winfrom HttpWebRequest 请求获取html网页信息和提交信息

    string result =GetRequest("http://localhost:32163/DuoBao/ajax.aspx", "time=5"); ...

  10. HDU1039-Easier Done Than Said?(字符串处理)

    一,题意: 判断三个条件 1:有元音字母 2:不能三个连续元音或辅音 3:不能连续两个相同的字母,除非ee或oo二,思路 写函数一个条件一个条件去判断 #include<iostream> ...