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