脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript innerHTML、outerHTML、innerText、outerText

javascript innerHTML、outerHTML、innerText、outerText的区别

 更新时间：2008年11月24日 20:50:05   投稿：mdxy-dxy  
这篇文章主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下

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>

您可能感兴趣的文章:

相关文章

  • JS实现仿京东淘宝竖排二级导航

    JS实现仿京东淘宝竖排二级导航

    本文给大家分享一段使用原生Javascript实现的仿京东淘宝竖排二级导航的代码，非常的实用，有需要的小伙伴参考下
    2014-12-12
  • js保存当前路径(cookies记录)

    js保存当前路径(cookies记录)

    曾经做了一个取消订单的功能。这个功能在个人中心里面有，在订单的详细页面也有。按照正常的思路，这两块都可以提交到相同的action去处理，但是返回的页面是不一样的，都是返回到当前页面就可以了。
    2010-12-12
  • 用javascript实现li 列表数据隔行变换背景颜色

    用javascript实现li 列表数据隔行变换背景颜色

    客户端效果，效率自然不错。以前的做法是偶数行时给li加一个class,方法当然不可取，如果后台读取再加class就很麻烦了，看看这个效果
    2007-08-08
  • TypeScript对于Duck类型和模块命名空间应用

    TypeScript对于Duck类型和模块命名空间应用

    这篇文章主要介绍了TypeScript对于Duck类型和模块命名空间应用，Duck类型是一种动态类型和多态形式，在duck类型中，重点是对象的行为可以做什么，而不是对象所属的类型
    2022-08-08
  • JavaScript实现的搜索及高亮显示功能示例

    JavaScript实现的搜索及高亮显示功能示例

    这篇文章主要介绍了JavaScript实现的搜索及高亮显示功能,涉及javascript字符遍历与页面元素属性相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • 十个开发人员面临的最常见的JavaScript问题总结

    十个开发人员面临的最常见的JavaScript问题总结

    今天，JavaScript 是几乎所有现代 Web 应用的核心。这就是为什么JavaScript问题，以及找到导致这些问题的错误，是 Web 发者的首要任务。本文总结了十个常见的问题及解决方法，需要的可以参考一下
    2022-11-11
  • JavaScript实现三种常用网页特效(offset、client、scroll系列)

    JavaScript实现三种常用网页特效(offset、client、scroll系列)

    这篇文章主要为大家介绍了三种常用的PC端网页特效：元素偏移量offset系列，元素可视区client系列和元素滚动scroll系列，文中示例代码介绍详细，需要的可以参考一下
    2021-12-12
  • TypeScript泛型约束条件示例详解

    TypeScript泛型约束条件示例详解

    有了泛型之后一个函数或容器类能处理的类型一下子扩到了无限大,似乎有点失控的感觉,所以这里又产生了一个约束的概念,下面这篇文章主要给大家介绍了关于TypeScript泛型约束条件的相关资料,需要的朋友可以参考下
    2022-04-04
  • 一个javascript参数的小问题

    一个javascript参数的小问题

    2008-03-03
  • 用move.js库实现百叶窗特效

    用move.js库实现百叶窗特效

    本文主要介绍了用move.js库实现百叶窗特效的思路与方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02

最新评论