innerHTML、innerText、outerHTML、outerText区别。

2024年3月3日 133次阅读 来源: 唐僧洗头爱飘柔

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

<div id="div1">hello world</div>
<div id="div2">
<span>segmentfault</span>
<p>dazhuaoyao</p>
</div>

执行console.log(document.getElementById(‘div1’).innerHTML);输出：hello world
执行console.log(document.getElementById(‘div2’).innerHTML);输出：
<span>segmentfault</span>
<p>dazhuaoyao</p>
执行document.getElementById(‘div1’).innerHTML=‘node’会设置div1中的内容为：node
执行document.getElementById(‘div1′).innerHTML='<div>’+’node’+'</div>’,此时页面显示的内容依旧是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='<div>’+’node’+'</div>’;此时页面显示的内容是<div>node</div>，此时标签名没有被解析，当作字符原样输出。

3.outerHTML:设置或获取对象及其内容的 HTML 形式。使用上面的div操作：
执行console.log(document.getElementById(‘div1’).innerHTML);输出：
<div id=”div1″>hello world</div>
执行console.log(document.getElementById(‘div2’).innerHTML);输出：
<div id=”div2″>

<span>segmentfault</span>
<p>dazhuaoyao</p>

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

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

    原文作者：唐僧洗头爱飘柔
    原文地址: https://segmentfault.com/a/1190000008588952
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞