innerHTML、innerText、outerHTML、outerText区别。

wxcmdn 2019-06-21

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

相关推荐

swiftwwj / 0评论 2019-12-29