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