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;& ...
随机推荐
- STL容器之优先队列
STL容器之优先队列 优先级队列,以前刷题的时候用的比较熟,现在竟然我只能记得它的关键字是priority_queue(太伤了).在一些定义了权重的地方这个数据结构是很有用的. 先回顾队列的定义:队列 ...
- Caused by: java.lang.ClassNotFoundException: Didn't find class "io.grpc.helloworldexample.HelloworldActivity" on path: DexPathList
FAQ: Android app 编译好后安装到手机,运行时闪退,报如下错误: java.lang.RuntimeException: Unable to instantiate activity ...
- IDEA 创建Spring MVC项目搭建
概述 IntelliJ IDEA是一款更加集成智能的开发工具,相对Myeclipse开发而言,使用起来相对更加的方便:初步手动使用IDEA搭建Spring MVC项目,现将操作流程整理记录如下. 环境 ...
- luogu 1471
题意: 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差. 操作1:1 x y k ,表示将第x到第y项每项加上k,k为一实数. 操作2:2 x y ...
- [转]fiddler 抓包 HTTPS 请求
教程开始 安装 fiddler 首先准备一台可以上网的 windos 电脑,准备一部智能手机. fiddler 抓包工具:下载地址( 自行百度一搜一大片).安装,打开如果遇到. net framewo ...
- 【AtCoder】ExaWizards 2019
ExaWizards 2019 C - Snuke the Wizard 发现符文的相对位置不变,直接二分某个位置是否到达最左或最右来计算 #include <bits/stdc++.h> ...
- SQL Server生成数据库的数据字典存储过程
use fpErp --指定要生成数据字典的数据库 go SELECT 表名=case when a.colorder=1 then d.name else '' end, 表说明=case whe ...
- ELK使用2-Kibana使用
一.创建kibana索引 1.es索引可以在这儿查看 2.kibana创建索引可以在这儿查看(必须es中存在相应的索引才能在kibana中创建) 点击创建然后选择es中存在的索引即可创建相应的索引 3 ...
- UOJ#62. 【UR #5】怎样跑得更快 数论 莫比乌斯反演
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ62.html 题解 太久没更博客了,该拯救我的博客了. $$\sum_{1\leq j \leq n} \ ...
- Spring Boot Starters 列表
Spring Boot application starters 名称 描述 Pom spring-boot-starter 核心starter,包括自动配置支持,日志和YAML Pom spring ...