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

DOM中的outerHTML,innerHTML,outerText,innerText的区别

时间:2017-03-27 21:16:07      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:stat   技术分享   alt   innertext   练习   html   标准   html标签   put   

--转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于: 

1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。 
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。 

技术分享

特别说明: 
  innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例: 
<a href="javascript:alert(document.getElementById(‘test‘).innerHTML.replace(/<.+?>/gim,‘‘))">无HTML,符合W3C标准</a> 

详细出处参考:http://jhxk.javaeye.com/blog/353309

代码练习:(ie生效,ff中只有innerHTML是对的)

 

<script   type="text/javascript">        
function   getinnerHTML()        
{        
var   e=window.document.getElementById("testdiv");        
alert(e.innerHTML);      //<p>白云</p>  
}        
function   getouterHTML()        
{        
var   e=window.document.getElementById("testdiv");        
alert(e.outerHTML);      //<div id="testdiv"><p>白云</p></div>  
}    
function   getinnerText()        
{        
var   e=window.document.getElementById("testdiv");        
alert(e.innerText);      //白云  
}   
function   getouterText()        
{        
var   e=window.document.getElementById("testdiv");        
alert(e.outerText);      //白云  
}       
</script>        
  
<div id="testdiv"><p>白云</p></div>  
<p>        
    <input   type="button"   name="Submit2"   value="innerHTML"   onClick="getinnerHTML()">        
    <input   type="button"   name="Submit"     value="outerHTML"   onClick="getouterHTML()">   
    <input   type="button"   name="Submit2"   value="innerHTML"   onClick="getinnerText() ">        
    <input   type="button"   name="Submit2"   value="innerHTML"   onClick="getouterText()">             
</p>  

 

DOM中的outerHTML,innerHTML,outerText,innerText的区别

标签:stat   技术分享   alt   innertext   练习   html   标准   html标签   put   

原文地址:http://www.cnblogs.com/daysme/p/6628684.html

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