innerHTML 与 outerHTML区别

示例代码：

<div id="test">
    <p>这是innerHTML</p>
    <p>这是innerHTML</p>
</div>

innerHTML：

//读

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>

 

outerHTML：

//读
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 >
    <p>这是innerHTML</p>
    <p>这是innerHTML</p>
</div>

这里要注意一个问题，就是给outerHTML写入内容的时候，会将元素本身替换掉，这一点可以通过审查页面结构可以看出来。故，我们打印出来的结果其实是原来的元素内容，重新写入的结果需要通过审查页面结构才可以看出来！！！！

 

结论：

innerHTML 和 outerHTML 的区别就是：outerHTML 会获取（替换）元素本身。