在网站建设过程中经常遇到innerHTML和outerHTML,很多前端基础不好的分不清有什么区别。
一、区别说明
1)innerHTML:
从对象内部的起始位置到终止位置的全部内容, 不包括本身HTML标签。
2)outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
二、举个例子
<div id="parent">
<span>test1</span>
<span>test2</span>
</div>
innerHTML的值是
<span>test1</span>
<span>test2</span>
outerHTML的值是
<div id="parent">
<span>test1</span>
<span>test2</span>
</div>
这里要注意一个问题,就是给outerHTML写入内容的时候,会将元素本身替换掉,这一点可以通过审查页面结构可以看出来。故,我们打印出来的结果其实是原来的元素内容,重新写入的结果需要通过审查页面结构才可以看出来!!!!