<html> <head> <title>A test for innerText, outerText method</title> <script language='javascript'> <!-- function getInnerText(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("innerText(): The "+objectID+" not found."); }else{ alert("innerText(): "+divTextObject.innerText); } } function getOuterText(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("outerText(): The "+objectID+" not found."); }else{ alert("outerText(): "+divTextObject.innerText); } } function getInnerHTML(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("innerHTML(): The "+objectID+" not found."); }else{ alert("innerHTML(): "+divTextObject.innerHTML); } } function getOuterHTML(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("outerHTML(): The "+objectID+" not found."); }else{ alert("outerHTML(): "+divTextObject.outerHTML); } } /**********************************************************************************/ var textValue="Hellin love Linda for ever." var htmlValue="<span> Hellin <button>love Linda </button></span>for ever."; function change_outerHTML(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("outerHTML(): The "+objectID+" not found."); }else{ divTextObject.outerHTML=htmlValue; } } function change_innerHTML(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("innerHTML(): The "+objectID+" not found."); }else{ divTextObject.innerHTML=htmlValue; } } function change_outerText(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("outerText(): The "+objectID+" not found."); }else{ divTextObject.outerText=textValue; } } function change_innerText(objectID){ var divTextObject=document.getElementById(objectID); if(!divTextObject){ alert("innerText(): The "+objectID+" not found."); }else{ divTextObject.innerText=textValue; } } --> </script> </head> <body> <p> <div id='divText' >Hello, <button>Hellin Zhang</button></div> </p> <br/> <input name="testButton" value="innerHTML" type="button" OnClick="getInnerHTML('divText');"> <input name="testButton" value="outerHTML" type="button" OnClick="getOuterHTML('divText');"> <input name="testButton" value="innerText" type="button" OnClick="getInnerText('divText');"> <input name="testButton" value="outerText" type="button" OnClick="getOuterText('divText');"> <br/><br/><br/><br/> <input name="testButton" value="change_innerHTML" type="button" OnClick="change_innerHTML('divText');"> <input name="testButton" value="change_outerHTML" type="button" OnClick="change_outerHTML('divText');"> <br/> <input name="testButton" value="change_innerText" type="button" OnClick="change_innerText('divText');"> <input name="testButton" value="change_outerText" type="button" OnClick="change_outerText('divText');"> </body> </html>
请您先下载运行并参考作者写的例子 .
<div id='divText' >Hello, <button>Hellin Zhang</button></div>
outerText:
当您调用 document.getElementById('divText').outerText 属性时 , 理论上是
获得开始标签 (start tag)”<div id='div1' >” 和 “</div> 之间所有的 text object 的 text value, 但是必须明确此时的操作也饱含了自身即 “div” object . 所以本例读取值 Hellin, Hello world! 这与 innerText 没有什么区别 .
如果你执行执行 document.getElementById(''divText' ').outerText="Hellin love Linda for ever."; 那么执行之后的结果是 <div id='divText' >Hello, <button>Hellin Zhang</button></div> 变成了 text object ( 即 “Hellin love Linda for ever.”). 换句话说 div 这个 tag 没了 , 而被你的一个文档对象 ”Hellin love Linda for ever.” 给换掉了 .
innerText
只能工作在 tag object 的内部即开始标签 (start tag)”<div id='div1' >” 和 “</div> 之间所有的 text object 的 text value , 但是它一定不包括自身对象 , 这里的 inner 就是这个含义 . 如果您只是读取 text objext 的 text value, 那么用 innerText 和 outerText 是等效的 , 它不同于 innerHTML 和 outerHTML.
当您写即你执行 document.getElementById('div1').innerText="Hellin love Linda for ever."; 后 <div id='divText' >Hello, <button>Hellin Zhang</button></div> 变成 <div id='divText' > Hellin love Linda for ever.</div>, div object 并没有销毁 .
换句话说 , inner 操作的是 tag 内部的对象 , outer 不仅操作内部对象也包含了本身对象 . 读这些属性值的过程中 , 可能没有区别 , 但是赋值操作区别可就大了 .
同理 innerHTML, outerHTML. 只不过它们操作的不是 text 而是 HTML.
注意 : W3C 只支持 innerHTML. 其他都是微软的 规定 .(outerHTML,outerText,innerText 只有微软的 IE 好使 , 其他浏览器不好用 (firefox, mozilla 等 ), 必须用其他方法实现 )