一、innerText属性用来定义对象所要输出的文本，在本例中innerText把对象it中的文本“您喜欢看微微一笑很倾城吗？”变成了“超级喜欢！”（语句it.innerText="超级喜欢！"）。而对对象ih的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象ih内部的HTML语句，于是它把文本变成了“肖奈!”，而且文本输出改成了斜体（<i></i>）并加粗（<b></b>），即语句ih.innerHTML="<i><b>肖奈!</b></i>"。

<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.itd">

<html>

<head>

    <meta charset="UTF-8">

    <title>innerText和innerHTML用法实例</title>

</head>

<body>

<p><span style="color:red;">请点击下边的文字……</span>

<ul>

    <li id="it" onclick="changeText()">您喜欢看微微一笑很倾城吗? </li>

    <li id="ih" onclick="changeHtml()">您叫什么名字? </li>

    <li onclick="back()">恢复原样! </li>

</ul>

</body>

<script type="text/javascript">

    function changeText() {

        it.innerText="超级喜欢!";

    }//function

    function changeHtml() {

        ih.innerHTML="<i><b>肖奈!</b></i>";

    }//function

    function back() {

        it.innerText="您喜欢看微微一笑很倾城吗? ";

        ih.innerHTML="您叫什么名字?";

    }

</script>

</html>

二、下例的效果是先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本

<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.itd">

<html>

<head>

    <meta charset="UTF-8">

    <title>用innerText和innerHTML制作动态网页</title>

</head>

<body>

<form name="frm">

    <p>

        <span style="color:red;">请在文本框中输入文字:</span><br/><br/>

        <label>第一个文本框:</label><input type="text" name="txt" size=""/><br/><br/>

        <label>第二个文本框:</label> <input type="text" name="txt2" size=""/>

        <br><br/>

        <input type="button" value="输出two文本" name="B1" style="color:blue;" onclick="OutputText()">

    </p>

</form>

<p id="Output">

    在此处输出文本：

</p>

</body>

<script type="text/javascript">

    function OutputText() {

        if(frm.txt2.text!="") {

            Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。

        else {

            Output.innerText="在此处输出文本：";}

//        if(frm.txt2!="") {

//            Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。

//        else {

//            Output.innerText="在此处输出文本：";}

//        if(frm.txt2.value!="") {

//            Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。

//        else {

//            Output.innerText="在此处输出文本：";}

    }

</script>

</html>

总结：

innerText和innerHTML获取元素的内容。如果元素只包含文本，那么innerText和innerHTML返回相同的值。但是，如果同时包含文本和其他元素，innerText将只返回文本的表示，而innerHTML，将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。

代码 innerText innerHTML
<div>Hello world</div> "Hello world" "Hello world"
<div><b>Hello</b>world</div> "Hello world" "<b>Hello</b>world"
<div><span></span></div> "" "<span></span>"

最后，通过将innerText赋值给它自身，表示从指定的元素中删除所有的HTML标签。
     oDiv.innerText = oDiv.innerText;

 补充：innerText、innerHTML、outText、outHTML终极PK

一、功能介绍：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本

二、示例参考

<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.itd">

<html>

<head>

<meta charset="UTF-8">

<title>innerText、innerHTML、outText、outHTML</title>

</head>

<body>

<p style="color:lawngreen;" >请点击下面列表变身：</p>

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

    <script language="JavaScript">

    //.innerHTML

    function innerHTMLDemo() {

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

    }

    //.innerText

    function innerTextDemo() {

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

    }

    //.outerHTML

    function outerHTMLDemo() {

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

    }

    //.outerText

    function outerTextDemo() {

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

    }

    </script>

    </html>

运行效果：

三、不同之处:
简单的说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标签。

innerHTML与innerText的PK的更多相关文章

  1. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  2. JS中innerHTML，innerText，value

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

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

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

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

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

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

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

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

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

  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. state与status的区别

    status 指人时暗指相对的地位,指物时相当于 situation.situation 较狭义地指由环境综合决定的特定时间上的状态或情形. state 人或物存在或所处的状态,和 condition ...

  2. POJ 3006 Dirichlet&#39;s Theorem on Arithmetic Progressions 快筛质数

    题目大意:给出一个等差数列,问这个等差数列的第n个素数是什么. 思路:这题主要考怎样筛素数,线性筛.详见代码. CODE: #include <cstdio> #include <c ...

  3. java学习笔记（5）——内部类

    一.内部类 1,静态内部类 使用static修饰,声明在类体中 静态内部类中可以访问外部类的静态成员 2,成员内部类 声明在类体中,不使用static,具有类的成员特征,也就是,必须有类的实例才能 创 ...

  4. ecmall二次开发 直接实例化mysql对象

    $db = &db(); // 第一步赋值数据库类库, $db->query(sql); // 第二步执行mysql 语句; 常用的数据库函数: 得到一行数据 $user=$db-> ...

  5. UESTC 890 Card Trick(DP 纸牌魔术)

    题意  给你一些牌  所有正面朝下放桌子上   你选一个起点    翻开那张牌   牌上的数字是几就向前走几步   J,Q,K 都是向前走10步  A向前走11步   知道向前走相应的步数后超过了终点 ...

  6. accept函数

    accept()函数 系统调用 accept() 会有点古怪的地方的! 你能够想象发生 这种事情:有人从非常远的地方通过一个你在侦听 (listen()) 的port连接 (connect()) 到你 ...

  7. MOGODB REDIS

    http://www.cnblogs.com/huangxincheng/ http://blog.csdn.net/opens_tym/article/details/9832301 http:// ...

  8. 配置apache、php、mysql之间的关系

    1.index.php文件放入/usr/local/apache2/htdocs 目录下 其中index.php里面内容为: <?php phpinfo(); $dbc= mysql_conne ...

  9. java对象创建过程

    1.jvm找到class文件路径. 2.jvm载入class文件,静态初始化,创建一个class对象. 3.为即将创建的对象分配内存空间. 4.对分配的空间进行清零,例如:int清除为0,boolea ...

  10. [Java] MAP、LIST、SET集合解析

    在JAVA的util包中有两个所有集合的父接口Collection和Map,它们的父子关系: java.util        +Collection 这个接口extends自 --java.lang ...