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;& ...
随机推荐
- Django中间件 及 form 实现用户登陆
Django中间件 及 form 实现用户登陆 Form 验证 密码调用md5 加密存储 form.add_error("字段名", "错误信息") 自定义错误 ...
- Git推送错误Remote: User permission denied错误解决方法
用了别的同事的电脑,推送代码,报错. 解决方法: 修改别人的密码,改成自己的账号和密码就可以了.
- MySql中 delimiter 详解
转载于:http://blog.csdn.net/yuxin6866/article/details/52722913 其实就是告诉MySQL解释器,该段命令是否已经结束了,mysql是否可以执行了. ...
- Android 敏感权限申请
动态权限管理是Android6.0(Build.VERSION_CODES.M = Api23)推出的,提醒用户当前APP所需要的权限,防止滥用.这些权限一般分为三种:(1)普通权限:直接manife ...
- GO语言之urfave/cli命令行解析
练习URL: https://blog.csdn.net/sd653159/article/details/83381786 相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络. ...
- NetCore 生成RSA公私钥对，公钥加密私钥解密，私钥加密公钥解密
using Newtonsoft.Json; using Org.BouncyCastle.Crypto; using Org.BouncyCastle.Crypto.Encodings; using ...
- [转] Webpack-CommonsChunkPlugin
当前项目结构 项目结构 其中 Greeter.js 引用了 config.json main.js 和 second.js 都引用了 Greeter.js main.js 还引用了 onlyfor ...
- centos 6 切换base源
切换为阿里云源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup && wg ...
- hive启用压缩
<property> <name>hive.exec.compress.intermediate</name> <value>true</valu ...
- 007 numpy数组文件的存取
不知道这个有没有用,都整理了一番. 一:数组以二进制格式进行存储 1.说明 np.save与np.load是读写磁盘数组数据的两个重要函数. 默认情况下,数组以压缩的原始二进制格式保存在扩展名为npy ...