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;& ...
随机推荐
- MyBatis - 10.MyBatis扩展
1.PageHelpler分页插件使用 官方文档:中文 1.1 引入插件 1.1.1 引入的jar pagehelper-5.1.6.jar jsqlparser-1.2.jar 1.1.2 mave ...
- SqlServerHelp
using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...
- python--使用队列结构来模拟共享打印机等候时间
按书里的样例抄的. 可以看到,将打印速度由第分钟5页提高到10页之后, 每个学生提交打印任务到打印完成的时间明显缩短. =========================== 在计算机科学实验室里考虑 ...
- sprintf补位
有的时候需要00001这样的字符串 来源却是Int的1 这个时候就可以用sprintf方法了 $i = 3; $a=sprintf("%08d", $i); echo $a; %0 ...
- 【Android】ScaleAnimation 详解
ScaleAnimation类是Android系统中的尺寸变化动画类,用于控制View对象的尺寸变化,该类继承于Animation类.ScaleAnimation类中的很多方法都与Animation类 ...
- Codeforces 725E Too Much Money (看题解)
Too Much Money 最关键的一点就是这个贪心可以在sqrt(n)级别算出答案. 因为最多有sqrt(n)个不同的数值加入. 我们可以发现最优肯定加入一个. 然后维护一个当前可以取的最大值, ...
- yii2上传七牛图片(超详细)
前期准备 1.在七牛注册账号https://portal.qiniu.com/signup/choice 2.创建空间https://portal.qiniu.com/bucket(记住存储空间名称和 ...
- siege压力测试工具安装和介绍
Siege是linux下的一个web系统的压力测试工具,支持多链接,支持get和post请求,可以对web系统进行多并发下持续请求的压力测试. 安装 Siege #wget http://www.jo ...
- UDF、UDAF、UDTF函数编写
一.UDF函数编写 1.步骤 1.继承UDF类 2.重写evalute方法 .继承GenericUDF .实现initialize.evaluate.getDisplayString方法 2.案例 实 ...
- 完全背包-hdu1114
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 题目描述: 代码实现: #include<cstdio> #include<i ...