您的位置：首页 > Web前端 > HTML

innerHTML、outerHTML、innerText、outerText的区别

2006-12-05 15:22 375 查看

<!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 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航