innerHTML innerText与outerHTML间的区别
innerHTML与innerText及outerHTML间的区别最容易使初学者搞混淆，为了更好的使读者区分开。下面我就通过一个demo来解释:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>innerHTML与innerText及outerHTML间的区别</title>
</head>
<body>
<div id="outer">lala
<p>hello word</p>
<span>我是span元素</span>
<div>很开森 <span>啦啦啦啦……</span></div>
</div>
<script type="text/javascript">
var outer = document.getElementById('outer');
// alert(outer.innerHTML);
alert(outer.innerText);
// alert(outer.outerHTML);
// alert(outer.outerText);
</script>
</body>
</html>
运行结果如下：
outer类的innerHTML结果为：
outer类的outerHTML结果为：
outer类的innerText的结果为：
即：
innerHTML: div1.innerHTML的结果为 div包含元素及内容
innerText: div1.innerText的结果为 div包含的内容
outerHTML: div1.outerHTML的结果为 div包含元素及内容以及div元素本身
综上所述：
innerHTML：从对象的起始位置到终止位置的全部内容,不包括Html标签
outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。
innerText:从对象的起始位置到终止位置的全部元素节点中的内容
需要注意的是outerHTML属性只有IE浏览器才有，其它浏览器是不支持的
innerHTML innerText与outerHTML间的区别的更多相关文章
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- innerHTML,innerText,textContent,outerHTML的用法以及区别
innerHTML获取的是对象起始的位置到终止位置全部内容,包含html标签. innerText和textContent结果是一样的,不包含标签,直接获取标签内的内容,区别是两者浏览器的兼容性. o ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- 测试开发技术：DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
- innerHTML、innerText和outerHTML、outerText的区别
区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- JS之innerHTML，innerText，outerHTML，textContent的用法与区别
示例html代码: <div id="test"> <span style="color:red">test1</span> ...
- innerHTML、innerText、outerHTML、textContent的区别
示例html代码: <div id="test"> <span style="color:red">test1</span> ...
- JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...
- innerHTML,innerText,outHTML,outText区别
<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;& ...
随机推荐
- 拒绝频繁IP访问--转载
//首先我们要实现 IHttpModule接口 using System; using System.Collections.Generic; using System.Text; using Sys ...
- MongDb介绍及简单实用
一:介绍 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mongo使用C ...
- python--自己实现的单链表常用功能
最近一个月,就耗在这上面吧. 很有收获的. # coding = utf-8 # 单向链表 class Node: def __init__(self, new_data): self.data = ...
- Introduction to boundary integral equations in BEM
Boundary element method (BEM) is an effective tool compared to finite element method (FEM) for resol ...
- Windows下80端口被进程System占用的解决方法
最近电脑时不时就发生了80端口被占用的情况,简单百度解决后,当重启电脑的时候又发生被占用的情况.今天非常幸运的是,发生了80端口和8080端口都被占用了情况,忍无可忍决定下定决心解决这个坑爹的问题,经 ...
- bat处理复制文件
1.建bat文件自动执行复制,删除命令. 复制cd.dll文件至windows\system32的bat文件内容: @echo offset JtlDir=D:\apache-jmeter-3.0\t ...
- Codeforces 219E Parking Lot 线段树
Parking Lot 线段树区间合并一下, 求当前要占的位置, 不包括两端点的写起来方便一点. #include<bits/stdc++.h> #define LL long long ...
- 4、Qt Project之串口数据传输
串口数据传输: Step1:串口数据的发送和接收过程,我们需要单独的添加串口的相关模块进去,模块名称叫做serialport,我们需要建立的工程是QMainWindow的基类程序,不是QWidget程 ...
- 2017-2018-2 20165220『Java程序设计』课程 结对编程练习_四则运算
需求分析 题目要求 一个命令行程序实现: 自动生成小学四则运算题目(加.减.乘.除) 支持整数 支持多运算符(比如生成包含100个运算符的题目) 支持真分数 统计正确率 需求理解 输入:需要计算的式子 ...
- 使用PHPStorm 配置自定义的Apache与PHP环境
使用PHPStorm 配置自定义的Apache与PHP环境之一 关于phpstorm配置php开发环境,大多数资料都是直接推荐安装wapmserver.而对于如何配置自定义的PHP环境和Apach ...