innerHTML、outerHTML、innerText、outerText的区别

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 </ title >
</ head >

< body >
< script  language ="javascript" > ...
var innertext="欢迎来到我的博客 你调用的div对象还没有消失";
var outertext="欢迎来到我的博客 你调用的div对象已经没有消失不信你试一试";
function change_outerText(objectID)...{
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject)...{
        alert("outerText(): The "+objectID+" not found.");
    }else...{
        divTextObject.outerText=outertext;
    }
}
function change_innerText(objectID)...{
    var divTextObject=document.getElementById(objectID);
    if(!divTextObject)...{
        alert("innerText(): The "+objectID+" not found.");
    }else...{
        divTextObject.innerText=innertext;
    }
}
</ script >

  < div  id ="div" >< button > Hello techno-dragon </ button >< font  color ="green" >< h2 > This is a DIV! </ h2 ></ font ></ div >
  < br >
< input  name ="innerHTML"  value ="innerHTML"  type ="button"  OnClick ="alert(div.innerHTML);" >
< input  name ="outerHTML"  value ="outerHTML"  type ="button"  OnClick ="alert(div.outerHTML);" >
< input  name ="innerText"  value ="innerText"  type ="button"  OnClick ="alert(div.innerText);" >
< input  name ="outerText"  value ="outerText"  type ="button"  OnClick ="alert(div.outerText);" >  
< br >
由于上边无法解释innerText  和 outerText的区别所以看下面的按钮
< br >
< input  name ="change_outerText"  value ="outerText"  type ="button"  
OnClick ="change_outerText('div');" >  
< input  name ="change_innerText"  value ="innerText"  type ="button"
 OnClick ="change_innerText('div');" >  

 
</ body >
</ html >

上边代码运行就知道区别了^_^;

总结

inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.