innerHTML、innerText、textContent、outerHTML和value，傻傻

HollisChuang 发布于2019-08-23 11:35 / 2992人阅读

摘要：会省略内嵌的标签名，所以文本的只显示了的内容，并没有显示的标签名也必须是标签对的形式删除了格式信息，所有文本均在一行，所以文本的内容都在一行。也用来设置或获取成对标签之间的内容，并且只关注文本信息。之前，是不支持的。是的亲儿子，放心用吧。

原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-value.html

innerHTML、innerText、textContent、outerHTML和value，傻傻分不清楚？什么时候该用哪个？虽然我们常用的总是innerHTML，但在一些特殊情况下，正确的选择能够事半功倍，所以是时候对这几个小家伙仔细分分清楚了。

一个栗子

废话不多说，先来看个例子：

innerHTML、innerText、textContent、outerHTML和value的区别

你是谁？这是一个内嵌span测试

结果如图：

看完了其实还是一脸懵逼状。。有的值一样，有的甚至连值都不见了，什么鬼？好了总结一下：

innerHTML

innerHTML用来设置或获取成对标签之间的HTML内容，包括其中内嵌的子元素标签。

innerHTML会显示内嵌的标签，所以文本p的innerHTML会有内嵌的span

使用innerHTML的元素必须是标签对的形式，所以input的innerHTML值为空

innerHTML保留了格式信息，所以文本p的innerHTML内容会有换行

innerText

innerText也用来设置或获取成对标签之间的HTML内容，但它只关注文本信息，会省略内嵌的标签名。

innerHTML会省略内嵌的标签名，所以文本p的innerHTML只显示了span的内容，并没有显示span的标签名

innerText也必须是标签对的形式

innerText删除了格式信息，所有文本均在一行，所以文本p的innerText内容都在一行。

textContent

textContent也用来设置或获取成对标签之间的HTML内容，并且只关注文本信息。

这家伙和innerText一样一样的，但它保留了格式信息。

outerHTML

outerHTML设置或获取元素及其内容的HTML形式。

这个是最好区分的，直接看例子，它会把DOM元素本身的标签+内容+格式全部显示出来。

value

value是表单元素特有的属性，通常input用的比较多，就是其中输入的值，也很好区别。

innerHTML、innerText和textContent的再次较量

我们还要再把这三个难兄难弟挑出来，从浏览器兼容的角度来区别一下：

innerHTML是符合W3C标准的属性，而innerText适用于IE浏览器，textContent适用于火狐浏览器。

这也就是为什么我们总能看到innerHTML，总对它偏爱有加，毕竟是W3C的亲儿子嘛。

只不过到了今天，其余的浏览器也都实现了innerText和textContent，但要注意的是：

IE6-8只部分支持了innerHTML，在IE下，跟table有关的元素的innerHTML是只读的，我们无法改变其值；从IE9开始，全面支持了innerHTML。

IE9之前，是不支持textContent的。

innerText是IE的亲儿子，放心用吧。

云服务器 GPU云服务器 innerhtml_innertext textContent outerHTML innerText

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97179.html

jQuery 源码系列（十六）html 和 text

摘要：函数源码下面是和的源码，看了之后肯定有话要说函数回调函数好吧，我承认，又是同样的套路，先交给函数来处理，然后函数，我猜这个时候函数肯定是采用方式使绑定当前。欢迎来我的专栏查看系列文章。上一章谈到了 dom 的几个插入操作，虽然插入的方式多种多样，但只要在懂了原生方法等基础上，代码看起来都不是很复杂。比较有意思的一个函数就是 buildFragment 方法，用来将 html 字符串...

mj 2019-08-21 11:32 评论0 收藏0
JavaScript DOM 5 － HTML元素的内容

摘要：一个元素的内容到底是指什么特别是对于那些有子节点的元素。对于这种类型的，和返回的结果也不同。假如我们有这样的一段代码我们对分别取和，得到的结果如下还是会把里面的内容返回来，但是则不会。一个HTML元素的内容到底是指什么？特别是对于那些有子节点的HTML元素。1: 首先来看一下可以获取HTML元素的内容的方式有哪些： 1: element.innerHTML 2: element.o...

Harpsichord1207 2019-08-20 17:29 评论0 收藏0
关于DOM的问题笔记

摘要：实时可以传参返回包括了所有名字符合指定条件的元素实时可以传参用于选择拥有属性的元素比如和等返回匹配指定属性的元素节点。返回位于页面指定位置最上层的子节点。此外，使用可以防止攻击。而自身不在存在于创建它时所在的位置。 1. 获取某个 dom 元素的方式 //节点集合属性（元素节点选取） document.all //返回文档中所有元素 document.links //返回当前文...

FullStackDeveloper 2019-08-22 10:54 评论0 收藏0
DOM疑惑点整理（三）

摘要：好的，这些是众所周知的。和两者最大区别就是是否会改变调用它们的节点自身，类似上面与的其二中所描述。并未写入规范，不建议使用，而且会导致调用它的节点自身消失。两者可能因为浏览器不同，输出的文本格式略有差别 innerHTML和outerHTML 先说一个几乎众所周知的，innerHTML和outerHTML中的内容都会被解析为DOM子树，其二就是， let txt = doc...

高胜山 2019-08-22 16:34 评论0 收藏0
DOM疑惑点整理（三）

摘要：好的，这些是众所周知的。和两者最大区别就是是否会改变调用它们的节点自身，类似上面与的其二中所描述。并未写入规范，不建议使用，而且会导致调用它的节点自身消失。两者可能因为浏览器不同，输出的文本格式略有差别 innerHTML和outerHTML 先说一个几乎众所周知的，innerHTML和outerHTML中的内容都会被解析为DOM子树，其二就是， let txt = doc...

lucas 2019-08-02 10:15 评论0 收藏0