innerHTML，innerText&outerHTML （转）

innerHTML的属性和innerText的属性相似，如下例：

<P id="test1">Hello Test!</P>

<input type="button" value="getinnerHTML" onclick="alert(document.getElementById('test1').innerHTML)">

<input type="button" value="getinnerText" onclick="alert(document.getElementById('test1').innerText)">

可以得到alert()的返回值均为"Hello Test!"

由此可以看出innerHTML和innerText有相似的地方。

 

同时，innerHTML和innerText还有不同的地方，同样通过一个例子来体现：

<div id="test1" style="background-color:#ff9966">Hello Test</div> 
<input type="button" value="getinnerHTML" onclick="getinnerHTML()"> 
<input type="button" value="getinnerText" onclick="alert(document.getElementById('test1').innerText)">
<input type="button" value="setinnerHTML" onclick="setinnerHTML()"> 
<script language="javascript"> 
function getinnerHTML() 
{ 
alert(document.getElementById("test1").innerHTML) 
} 
function setinnerHTML() 
{ 
document.getElementById("test1").innerHTML="<div id='test1' style='background-color:#449966'>See you again!</div>" 
} 
</script>

例子显示，在alert innerHTML时，会alert出"<div id='test1' style='background-color:#449966'>See you again!</div>"，即innerHTML为格式化的信息

而在alert innerText时,只会显示See you again!的信息。

三者的区别：

 

 

同时引用一篇文章加深理解

http://upinguping626.spaces.live.com/blog/cns!5270ba850df6356a!115.entry

链接：http://luy1661.blog.163.com/blog/static/279536282007623113210617/