innerHTML、innerText、outerHTML、outerText区分。

2024年5月13日 206次阅读 来源: 唐僧洗头爱飘柔

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞