<!
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 >
< 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 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.