开头说下innerText和outerText只在chrome浏览器中有效

定义和用法

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签。

来看代码

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div id="div1">这是一个标签div</div>
<span id="span1">这是一个标签span</span>
<div id="div2">
<span>div2里面的span1</span>
<span>div2里面的span2</span>
</div>
<script>
var div1 = document.getElementById("div1").innerHTML;
var span1 = document.getElementById("span1").innerHTML;
var div2 = document.getElementById("div2").innerHTML;
console.log(div1);
console.log(span1);
console.log(div2);
</script>
</body> </html>

我定义了三个标签 ,然后用console打印出来

可以看出如果如果当前标签只有文字,那innerHTML只会输出文字

如果还有子标签存在,则会将子标签以及标签内的文字一起输出,这点一定要切记

这个时候你可以用replace方法来将标签去除

只获得文本内容

document.getElementById('div2').innerHTML.replace(/<.+?>/gim,''));

如上,span标签已经没有了,只剩下里面的文本内容

定义和用法

innerText 属性设置或返回表格行的开始和结束标签之间的 HTML内容,不包括Html标签。
我们看代码
<body>
<div id="div1">这是一个标签div</div>
<span id="span1">这是一个标签span</span>
<div id="div2">
<span>div2里面的span1</span>
<span>div2里面的span2</span>
<img src="" alt="">
</div>
<script>
var div1 = document.getElementById("div1").innerText;
var span1 = document.getElementById("span1").innerText;
var div2 = document.getElementById("div2").innerText;
console.log(div1);
console.log(span1);
console.log(div2); </script>
</body>
 打印出来的结果

从结果可以看到不管是当前标签还是子标签都只输出文本内容

定义和用法

outerHTML  设置或获取对象及其内容的HTML形式,也就是标签和文本内容全都显示出来
我们看代码
<body>
<div id="div1">这是一个标签div</div>
<span id="span1">这是一个标签span</span>
<div id="div2">
<span>div2里面的span1</span>
<span>div2里面的span2</span>
<img src="" alt="">
</div>
<script>
var div1 = document.getElementById("div1").outerHTML;
var span1 = document.getElementById("span1").outerHTML;
var div2 = document.getElementById("div2").outerHTML;
console.log(div1);
console.log(span1);
console.log(div2);
</script>
</body>

我们看控制台的打印结果

有意思吧

outerHTML是把当前标签的全部内容包括标签本身也全部取出来了

定义和用法

outerText  设置或获取对象及其内容的HTML形式,也就是标签和文本内容全都显示出来

我们来看代码

<body>
<div id="div1">这是一个标签div</div>
<span id="span1">这是一个标签span</span>
<div id="div2">
你好世界
<span>div2里面的span1</span>
<span>div2里面的span2</span>
<img src="" alt="">
</div>
<script>
var div1 = document.getElementById("div1").outerText;
var span1 = document.getElementById("span1").outerText;
var div2 = document.getElementById("div2").outerText;
console.log(div1);
console.log(span1);
console.log(div2);
</script>
</body>

看console打印的结果

很显然,outerText是把当前标签的内容给输出了,如果有子标签,也会把子标签的内容也一起输出了

那好,经过这么一比较,我们就可以得出结论了

innerHTML  输出当前标签的文本内容,如果标签内有子标签,会连子标签本身和子标签内的文本内容一起输出

innerText     只输出当前标签内的文本内容,如果标签内有子标签,那么也只输出子标签内的文本内容

outerHTML  输出当前标签的本身和标签内的文本内容,如果有子标签,那么子标签本身和标签内的文本内容也将一起输出

outerText     只输出当前标签内的文本内容,如果标签内有子标签,那么也只输出子标签内的文本内容

那么outerText和innerText的区别到底在哪呢?同样是只输出文本内容,这两个属性在读数据的时候是完全一样的,可能在写数据的时候不一样?

下次写jq的html(),text(),val()记录时候更新一下

javaScript中innerHTML,innerText,outerHTML,outerText的区别的更多相关文章

  1. js 中innerHTML,innerText,outerHTML,outerText的区别

    开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...

  2. innerHTML, innerText, outerHTML, outerText的区别

    innerHTML:返回标签内部嵌套的子元素的所有html标签+文本内容content. innerText:返回标签内部嵌套的子元素的文本内容content. outerHTML:返回标签本身+嵌套 ...

  3. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

  4. innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

    今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...

  5. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  6. innerHTML和outerHTML有什么区别

    一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子1: & ...

  7. JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...

  8. JavaScript中=、==、===以及!=、!==的区别与联系

    JavaScript中=.==.===以及!=.!==的区别与联系   在JavaScript中,“=”代表赋值操作:“==”先转换类型再比较,“===”先判断类型,如果不是同一类型直接为false. ...

  9. JavaScript中object和Object有什么区别

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 ————————————————————— ...

随机推荐

  1. P1266 速度限制 (最短路,图论)

    题目链接 Solution 在最短路转移的时候在队列或者堆中记录状态为 \(f[u][v]\) 代表上一个节点为 \(u\) ,速度为 \(v\) . 然后按部就班转移即可... Code #incl ...

  2. 瞄一眼CopyOnWriteArrayList(jdk11)

    CopyOnWriteArrayList是ArrayList线程安全的变体.使用写时复制策略进行修改操作. 与之前版本较明显的区别是,jdk11中用来保护所有设值方法(mutator)的Reentra ...

  3. hdu 4741 Save Labman No.004异面直线间的距离既构成最小距离的两个端点

    Save Labman No.004 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  4. 转 #HTTP协议学习# (一)request 和response 解析

    http://www.cnblogs.com/bukudekong/p/3834020.html #HTTP协议学习# (一)request 和response 解析   注:本文转自:http:// ...

  5. 标准C程序设计七---41

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  6. poj 1950(搜索)

    Dessert Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5430   Accepted: 2029 Descripti ...

  7. 阿里云oss教程

    OSS是提供非结构化数据存取的服务.对于刚开始使用OSS的用户,非结构数据可以理解为word文档.PDF.PPT.EXCEL表格.MP3.MKV.RMVB.HTML等各种类型文件.OSS提供API去进 ...

  8. AC日记——Flag Codeforces 16a

    A. Flag time limit per test 2 seconds memory limit per test 64 megabytes input standard input output ...

  9. HDU 5266 pog loves szh III(区间LCA)

    题目链接 pog loves szh III 题意就是  求一个区间所有点的$LCA$. 我们把$1$到$n$的$DFS$序全部求出来……然后设$i$的$DFS$序为$c[i]$,$pc[i]$为$c ...

  10. 给button添加长按手势并侦测到此button

    1, 添加手势 self.longPressRecognizer = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@ ...