innerHTML、innerText、outerHTML、outerText区别。

lbool 发布于2019-08-20 14:49 / 1229人阅读

摘要：设置或获取对象起始标签和结束标签之间的内容。使用上面的操作执行输出执行输出注意到区别了吗，输出中的内容时，标签是不包含在内的。在设置时，执行此时页面显示的内容是，此时标签名没有被解析，当作字符原样输出。

1.innerHTML:设置或获取对象起始标签和结束标签之间的内容。如：

hello world

segmentfault
dazhuaoyao

执行console.log(document.getElementById("div1").innerHTML);输出：hello world
执行console.log(document.getElementById("div2").innerHTML);输出：
segmentfault

dazhuaoyao

执行document.getElementById("div1").innerHTML=‘node’会设置div1中的内容为：node
执行document.getElementById("div1").innerHTML="

"+"node"+"

",此时页面显示的内容依旧是node,标签名会自动解析，不会输出。

2.innerText:设置或获取位于对象起始和结束标签内的文本。使用上面的div操作：
执行console.log(document.getElementById("div1").innerHTML);输出：hello world
执行console.log(document.getElementById("div2").innerHTML);输出：
segmentfault
dazhuaoyao
注意到区别了吗，输出div2中的内容时，标签是不包含在内的。在设置innerText时，执行：
document.getElementById("div1").innerText="

"+"node"+"

";此时页面显示的内容是

node

，此时标签名没有被解析，当作字符原样输出。

3.outerHTML:设置或获取对象及其内容的 HTML 形式。使用上面的div操作：
执行console.log(document.getElementById("div1").innerHTML);输出：

hello world

执行console.log(document.getElementById("div2").innerHTML);输出：

segmentfault

dazhuaoyao

与innerHTML不同的是，对象本身的标签也包含进去了。在设置outerHTML时，和innerHTML一样

4.outerText:设置或获取对象的文本。使用上面的div操作：
执行console.log(document.getElementById("div1").outerText);输出：hello world
执行console.log(document.getElementById("div2").innerHTML);输出：
segmentfault
dazhuaoyao
不过，设置outerText的值时，可以解析标签名。

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

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

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

innerHTML、innerText、outerHTML、outerText区别。

摘要：设置或获取对象起始标签和结束标签之间的内容。使用上面的操作执行输出执行输出注意到区别了吗，输出中的内容时，标签是不包含在内的。在设置时，执行此时页面显示的内容是，此时标签名没有被解析，当作字符原样输出。 1.innerHTML:设置或获取对象起始标签和结束标签之间的内容。如： hello world segmentfault dazhuaoyao 执行console.log(doc...

Harpsichord1207 2019-08-01 16:26 评论0 收藏0
innerHTML&outerHTML&innerText&outerTex

摘要：有时候做项目会用到上述四个属性来获取文档里的一些内容，但对他们的区别还是有些模糊，所以写了几个简单的函数，通过打印在控制台上的结果看看他们之间的区别。有时候做项目会用到上述四个DOM属性来获取HTML文档里的一些内容，但对他们的区别还是有些模糊，所以写了几个简单的函数，通过打印在控制台上的结果看看他们之间的区别。代码： outer inner one be...

draveness 2019-08-23 13:56 评论0 收藏0
DOM相关知识点

摘要：此文目的本文主要是整理相关的知识点，方便日后的查看和各位的查缺补漏。属性和方法为元素节点，为属性节点，为文本节点与返回为大写标签名，如。避免链式操作如果有返回值，则存在内存中。这个返回值包括了这个元素自己的和继承自父元素的全部样式。此文目的本文主要是整理DOM相关的知识点，方便日后的查看和各位的查缺补漏。所以重在整理，并不会展开。目前还在持续整理中，打算在16日左右完结。 Nod...

rose 2019-08-22 16:18 评论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