outerText和innerText的区别。

    对于DOM对象的这两个属性，初学者往往会感到疑惑，因为通过它们所获得的值没有任何区别。

　

    实际上，只要理解了它们各自的含义，就不难辨别了。

    某元素的innerText指的是由其元素的开始标签和结束标签所包含的那一段HTML代码被去除格式后的纯文本。

       outerText与其不同的是它包含元素的开始和结束标签。

　

    在取值的时候两者没有任何区别，但在赋值的时候就很容易看出其区别了。

　

    下面是一个例子：

DIV容器 A:

DIV容器 B: code

<script language="javascript" type="text/javascript"> var str=document.getElementById("A").innerHTML; function changeInnerText() { document.getElementById("A").innerHTML=str; window.alert("先将DIV容器 A 还原成初始状态。然后改变DIV容器 B 的innerText。"); var tmp=document.getElementById("B").innerHTML; window.alert("改变之前DIV容器 A 的innerHTML为：/n/n/n"+str); document.getElementById("B").innerText="changed code"; window.alert("改变之后DIV容器 A 的innerHTML为：/n/n/n"+document.getElementById("A").innerHTML); } function changeOuterText() { document.getElementById("A").innerHTML=str; window.alert("先将DIV容器 A 还原成初始状态。然后改变DIV容器 B 的innerText。"); var tmp=document.getElementById("B").innerHTML; window.alert("改变之前DIV容器 A 的innerHTML为：/n/n/n"+str); document.getElementById("B").outerText="changed code"; window.alert("改变之后DIV容器 A 的innerHTML为：/n/n/n"+document.getElementById("A").innerHTML); } </script> 改变DIV容器 B 的innerText 改变DIV容器 B 的outerText

显示代码

	
<div id="A" style="font-size:20px;border:2px double black;">DIV容器 A:
<div id="B" style="font-size:16px;color:brown;">DIV容器 B:
<font face="Arial" size="7" color="#CC3399">code</font>
</div>
</div>
<script language="javascript" type="text/javascript">
<!--
var str=document.getElementById("A").innerHTML;
function changeInnerText()
{
	document.getElementById("A").innerHTML=str;
	window.alert("先将DIV容器 A 还原成初始状态。然后改变DIV容器 B 的innerText。");
	var tmp=document.getElementById("B").innerHTML;
	window.alert("改变之前DIV容器 A 的innerHTML为：/n/n/n"+str);
	document.getElementById("B").innerText="changed code";
	window.alert("改变之后DIV容器 A 的innerHTML为：/n/n/n"+document.getElementById("A").innerHTML);
}
function changeOuterText()
{
	document.getElementById("A").innerHTML=str;
	window.alert("先将DIV容器 A 还原成初始状态。然后改变DIV容器 B 的outerText。");
	var tmp=document.getElementById("B").innerHTML;
	window.alert("改变之前DIV容器 A 的innerHTML为：/n/n/n"+str);
	document.getElementById("B").outerText="changed code";
	window.alert("改变之后DIV容器 A 的innerHTML为：/n/n/n"+document.getElementById("A").innerHTML);
}
//-->
</script>
<button onclick="javascript:changeInnerText();" style="font-size:14px;color:blue;">改变DIV容器 B 的innerText</button>
<button onclick="javascript:changeOuterText();" style="font-size:14px;color:red;">改变DIV容器 B 的outerText</button>