在一道面试题中看到的。

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. 关于PHP语言

    ------php语言与JavaScript的使用 方法是相似 <script type="text/javascript"> </script>--js与 ...

  2. [转]Android Studio 里搭建自动化测试框架Robotium

    Android的自动化测试框架可选择的不多,后来选了Robotium(https://code.google.com/p/robotium/),它的语法及易用性挺像我们用在iOS里的KIF. 官方文档 ...

  3. JMF框架

    Java媒体框架(JMF)使你能够编写出功能强大的多媒体程序,却不用关心底层复杂的实现细节.JMF  API的使用相对比较简单,但是能够满足几乎所有多媒体编程的需求.在这篇文章中,我将向你介绍如何用很 ...

  4. 设置Flush刷新模式setFlushMode()

    参考 http://blog.csdn.net/superdog007/article/details/38852399 FlushMode的枚举值: FlushMode.ALWAYS:任务一条SQL ...

  5. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  6. setTimeout 学习闭包

    @(技术笔记)[css] 学习参考网站 css 网站,可供参考 javascript学习网站 var create = function (i){ return function(){ console ...

  7. perl学习之路1

    一切要从Hollo world开始 公司要用perl....啊, 不会只能自学了, 毕竟是公司啊, 不是学校...公司不学习就滚蛋了...惨惨惨 因为是学习嘛, 感觉开虚拟机比较麻烦所以直接用了个 瘟 ...

  8. vs2012 打开解决方案崩溃或者点击项目崩溃

    报错: 问题签名:  问题事件名称: CLR20r3 解决方案: 步骤1:开始-->所有程序-->Microsoft Visual Studio 2012-->Visual Stud ...

  9. bfs codeforces 754B Ilya and tic-tac-toe game

    这题简直把我坑死了 所有的坑都被我中了 题意: 思路:bfs or 模拟 模拟似乎没有什么坑 但是bfs真的是坑 AC代码: #include "iostream" #includ ...

  10. 对Java初学者的忠告

    1) 适合自己的图书才是最好的,最好的书并不一定适合你,看自己的情况. 如果你是一个Java初学者一上手就捧一本Thinking in Java在手里,我想你的日子是不会好过的,那样的书给有一定基础的 ...