示例代码：
<div id="test"> <p>这是innerHTML</p> <p>这是innerHTML</p> </div>
//读 var test = document.getElementById(‘test‘); console.log(test.innerHTML); //写 test.innerHTML = ‘<p>重新写入innerHTML</p>‘; console.log(test.innerHTML);
结果如下：
//读取结果 <p>这是innerHTML</p> <p>这是innerHTML</p> //写入结果 <p>重新写入innerHTML</p>
//读 var test = document.getElementById(‘test‘); console.log(test.outerHTML); //写 test.outerHTML = ‘<p>重新写入outerHTML</p>‘; console.log(test.outerHTML);
结果如下：
//读 <div id="test"> <p>这是innerHTML</p> <p>这是innerHTML</p> </div> <div id="test"> <p>这是innerHTML</p> <p>这是innerHTML</p> </div>
这里要注意一个问题，就是给outerHTML写入内容的时候，会将元素本身替换掉，这一点可以通过审查页面结构可以看出来。故，我们打印出来的结果其实是原来的元素内容，重新写入的结果需要通过审查页面结构才可以看出来！！！！
结论：
innerHTML 和 outerHTML 的区别就是：outerHTML 会获取（替换）元素本身。
原文：http://www.cnblogs.com/intangible/p/7533566.html