码迷,mamicode.com
首页 > Web开发 > 详细

innerHTML 与 outerHTML区别

时间:2017-09-17 01:24:30      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:console   ons   log   style   原来   区别   替换   一点   通过   

示例代码:

<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 id="test">
    <p>这是innerHTML</p>
    <p>这是innerHTML</p>
</div>

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

 

结论:

innerHTML 和 outerHTML 的区别就是:outerHTML 会获取(替换)元素本身。

 

innerHTML 与 outerHTML区别

标签:console   ons   log   style   原来   区别   替换   一点   通过   

原文地址:http://www.cnblogs.com/intangible/p/7533566.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!