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间的区别的更多相关文章

  1. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  2. innerHTML,innerText,textContent,outerHTML的用法以及区别

    innerHTML获取的是对象起始的位置到终止位置全部内容,包含html标签. innerText和textContent结果是一样的,不包含标签,直接获取标签内的内容,区别是两者浏览器的兼容性. o ...

  3. (转)innerHTML、innerText和outerHTML、outerText的区别

    原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别          博客分类: CSS/ ...

  4. 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别

    测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别   我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...

  5. innerHTML、innerText和outerHTML、outerText的区别

    区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...

  6. JS之innerHTML,innerText,outerHTML,textContent的用法与区别

    示例html代码: <div id="test"> <span style="color:red">test1</span> ...

  7. innerHTML、innerText、outerHTML、textContent的区别

    示例html代码: <div id="test"> <span style="color:red">test1</span> ...

  8. JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

    value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...

  9. innerHTML,innerText,outHTML,outText区别

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;& ...

随机推荐

  1. Django中间件 及 form 实现用户登陆

    Django中间件 及 form 实现用户登陆 Form 验证 密码调用md5 加密存储 form.add_error("字段名", "错误信息") 自定义错误 ...

  2. Git推送错误Remote: User permission denied错误解决方法

    用了别的同事的电脑,推送代码,报错. 解决方法: 修改别人的密码,改成自己的账号和密码就可以了.

  3. MySql中 delimiter 详解

    转载于:http://blog.csdn.net/yuxin6866/article/details/52722913 其实就是告诉MySQL解释器,该段命令是否已经结束了,mysql是否可以执行了. ...

  4. Android 敏感权限申请

    动态权限管理是Android6.0(Build.VERSION_CODES.M = Api23)推出的,提醒用户当前APP所需要的权限,防止滥用.这些权限一般分为三种:(1)普通权限:直接manife ...

  5. GO语言之urfave/cli命令行解析

    练习URL: https://blog.csdn.net/sd653159/article/details/83381786 相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络. ...

  6. NetCore 生成RSA公私钥对,公钥加密私钥解密,私钥加密公钥解密

    using Newtonsoft.Json; using Org.BouncyCastle.Crypto; using Org.BouncyCastle.Crypto.Encodings; using ...

  7. [转] Webpack-CommonsChunkPlugin

    当前项目结构   项目结构 其中 Greeter.js 引用了 config.json main.js 和 second.js 都引用了 Greeter.js main.js 还引用了 onlyfor ...

  8. centos 6 切换base源

    切换为阿里云源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup && wg ...

  9. hive启用压缩

    <property> <name>hive.exec.compress.intermediate</name> <value>true</valu ...

  10. 007 numpy数组文件的存取

    不知道这个有没有用,都整理了一番. 一:数组以二进制格式进行存储 1.说明 np.save与np.load是读写磁盘数组数据的两个重要函数. 默认情况下,数组以压缩的原始二进制格式保存在扩展名为npy ...