在一道面试题中看到的。

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. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  2. 关于i++,++i 的理解

    由于经常有同学在遇到 i++.++i 时犯困难.所以举例说明一下: int i = 20;        int sum = i++ * 30; //这个等式中 i = 20        int s ...

  3. JAVA 笔试笔记

    1.java优缺点 优点 :纯面对对象,跨平台,提供很多内置的类库,支持web开发,有较好的健壮性和安全性缺点 : 速度慢,跨平台不能像其他的语言一样接近操作系统,复杂 2.java与c/c++ 都是 ...

  4. DevExpress控件的GridControl控件小结

    DevExpress控件的GridControl控件小结 (由于开始使用DevExpress控件了,所以要点滴的记录一下) 1.DevExpress控件组中的GridControl控件不能使横向滚动条 ...

  5. 执行CSRF令牌所有形式使用POST方法

    从而在并未授权的情况下执行在权限保护之下的操作,有很大的危害性. php CSRF Guardfunction csrfguard_generate_token($unique_form_name){ ...

  6. select 相关

    获取select :获取select 选中的 text : ? 1 $("#ddlregtype").find("option:selected").text( ...

  7. serialVersionUID， ObjectInputStream与ObjectOutputStream类，Serializable接口，serialVersionUID的作用和用法

    ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...

  8. RemoteIE 开发者可跨平台使用IE测试网页

    RemoteIE,这是一个基于微软Azure的服务,它允许开发者在最新版本的IE(Windows 10技术预览版)中测试他们的网页,而不需要安装或在虚拟机中设置对应的系统.要想使用这项服务,开发者需要 ...

  9. dagger2 备注

    dagger 2是android下的IOC框架,类似java服务端的spring,但功能上远没有其强大.个人理解不管是APP还是服务端依赖注入的本质都是一样的,用于解耦某个服务的定义和实现.我自己给出 ...

  10. 作业六：团队项目——编写项目的Spec

    主要内容: 各组结合所选项目,编写项目的规格说明书(Spec),Spec应至少包含以下内容:(20分) 1. Spec的目标 2. 项目的典型用户和场景 3. 项目的用例模型 4. 项目中涉及到的术语 ...