innerHTML和outerHTML有什么区别

在网站建设过程中经常遇到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写入内容的时候，会将元素本身替换掉，这一点可以通过审查页面结构可以看出来。故，我们打印出来的结果其实是原来的元素内容，重新写入的结果需要通过审查页面结构才可以看出来！！！！