innerHTML innerText与outerHTML间的区别
2024-04-09 08:50:41
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浏览器才有，其它浏览器是不支持的
最新文章
- Ubuntu 16.04 安装 arm-linux-gcc 嵌入式交叉编译环境 问题汇总
- PHP是怎么运行的
- WinEdt 10 - revise the day to register
- flask笔记2-程序的基本结构
- Ink – 帮助你快速创建响应式邮件（Email）的框架
- （实用篇）php 文件夹删除，清除缓存程序
- poj 3159 差分约束
- 使用自定义任务审批字段创建 SharePoint 顺序工作流
- Android String 转 MD5
- 集合hashCode()方法和equals()办法
- 基于hashchange导航管理
- 【译】为什么BERT有3个嵌入层，它们都是如何实现的
- 洛谷 P2542 [AHOI2005]航线规划 解题报告
- Node.js之 EventLoop 理解（转）
- pandas 去除NAN
- Windows 8 Metro 应用开发入门(一)：开发环境介绍
- SwaggerUI用户手册
- LeetCode OJ：Remove Duplicates from Sorted List II（链表去重II）
- Activiti工作流小序曲
- 100. Remove Duplicates from Sorted Array && 101. Remove Duplicates from Sorted Array II [easy]