--转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:

1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。 
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。

特别说明: 
  innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例: 
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

详细出处参考:http://jhxk.javaeye.com/blog/353309

代码练习:(ie生效,ff中只有innerHTML是对的)

<script   type="text/javascript">
function getinnerHTML()
{
var e=window.document.getElementById("testdiv");
alert(e.innerHTML); //<p>白云</p>
}
function getouterHTML()
{
var e=window.document.getElementById("testdiv");
alert(e.outerHTML); //<div id="testdiv"><p>白云</p></div>
}
function getinnerText()
{
var e=window.document.getElementById("testdiv");
alert(e.innerText); //白云
}
function getouterText()
{
var e=window.document.getElementById("testdiv");
alert(e.outerText); //白云
}
</script> <div id="testdiv"><p>白云</p></div>
<p>
<input type="button" name="Submit2" value="innerHTML" onClick="getinnerHTML()">
<input type="button" name="Submit" value="outerHTML" onClick="getouterHTML()">
<input type="button" name="Submit2" value="innerHTML" onClick="getinnerText() ">
<input type="button" name="Submit2" value="innerHTML" onClick="getouterText()">
</p>

DOM中的outerHTML,innerHTML,outerText,innerText的区别的更多相关文章

  1. vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent

    区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...

  2. innerHTML和innerText的区别,以及select元素中怎么取出被选中的option。

    一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...

  3. innerHTML 与 innerText 的区别

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...

  4. innerHTML和 innerText的区别

    共同点:innerHTML和innerText都会把元素内内容替换掉.不同点:1,innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHT ...

  5. innerHTML与innerText的区别: 前者获取的是dom对象内的所有html元素 后者获取的是dom对象里面的纯文本元素

  6. innerHTML和innerText的区别

    以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...

  7. innerhtml outhtml innerText outText 区别

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

  8. Js—innerHTML和innerText的区别

    1.innerHTML属性和innerText属性 都是对元素的一个操作,简单讲,innerHTML可以在某种特定环境下重构某个元素节点的DOM结构,innerText只能修改文本值 在JavaScr ...

  9. innerHTML与innerText的区别

    innerHTML获取元素的HTML内容,和设计元素的HTML内容(HTML标签会被解析)例如:ele.innerHTML="<strong>我会被解释加粗</strong ...

随机推荐

  1. 设计模式之Template(模板)(转)

    Template定义: 定义一个操作中算法的骨架,将一些步骤的执行延迟到其子类中. 其实Java的抽象类本来就是Template模式,因此使用很普遍.而且很容易理解和使用,我们直接以示例开始: pub ...

  2. 设计模式之Flyweight(享元)(转)

    Flyweight定义: 避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). 为什么使用? 面向对象语言的原则就是一切都是对象,但是如果真正使用起来,有时对象数可能显得很庞大, ...

  3. tft屏图像文字一起显示

    2010-05-04 21:06:00 M16内部flash只有16k,要做数码相框,只能用usart通信了.明天继续研究.

  4. <转>jmeter(四)HTTP请求

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  5. django框架基础

    所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 最简单的web框架 import socket sk = socke ...

  6. 树莓派dhcp server

    首先安装isc-dhcp-server apt-get install isc-dhcp-server 然后编辑配置文件,选择需要开启dhcp服务器的网卡 vi /etc/default/isc-dh ...

  7. rabbitmq集群故障恢复详解

    RabbitMQ的mirror queue(镜像队列)机制是最简单的队列HA方案,它通过在cluster的基础上增加ha-mode.ha-param等policy选项,可以根据 需求将cluster中 ...

  8. Iterator和Iterable的区别以及使用

    Iterator和Iterable的区别以及使用   1.什么是迭代器 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址.迭代 ...

  9. 解决c1xx fatal error C1083 Cannot open source file

    在项目开发过程中,遇到一个问题,一个工程B导入另外一个工程A的生产代码,出现这个错误,最后查阅资料发现是文件路径太深,导致文件路径字符超过了217字符. 写了一个测试Demo来验证: 一.新建Win3 ...

  10. ERROR: please install the following Perl modules before executing ./mysql_install_db

    centos7.5 安装mysql数据库报错 问题: [root@db02-52 scripts]# ./mysql_install_db --user=mysql --basedir=/applic ...