innerText 和outerText 的区别
<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 等 ), 必须用其他方法实现 )