资讯专栏INFORMATION COLUMN

innerHTML、innerText、outerHTML、outerText区别。

lbool / 1236人阅读

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

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的值时,可以解析标签名。

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

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

相关文章

  • innerHTMLinnerTextouterHTMLouterText区别

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

    Harpsichord1207 评论0 收藏0
  • innerHTML&outerHTML&innerText&outerTex

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

    draveness 评论0 收藏0
  • DOM相关知识点

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

    rose 评论0 收藏0
  • DOM疑惑点整理(三)

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

    高胜山 评论0 收藏0
  • DOM疑惑点整理(三)

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

    lucas 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<