最近在學習Javascript的過程中，對innerHTML和innerText這兩個方法有點混淆，看了下兄弟連的js部分視頻，自己也做了一下小實驗，發現這兩個方法還是有些區別的。
區別一：首先，按字面上的意思解釋，innerHTML的意思是：“內部的HTML標籤”，innerText的意思是“內部的文本”。做一個輸出實驗就可以證明他們的區別。
在IE瀏覽器下：
使用innerHTML：
<html>
<body>
<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>
<script>
var aobj=document.getElementById("alink");
alert(aobj.innerHtml);
</script>
</body>
</html>
使用innerText：
<html>
<body>
<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>
<script>
var aobj=document.getElementById("alink");
aobj.innerHTML="<h1>google</h1>";
alert(aobj.innerText);
</script>
</body>
</html>
結果：
區別二：二者對IE和火狐的兼容性不同。
innerHTML是兼容IE和火狐的，
用innerHTML設置值並輸出，代碼如下：
<html>
<body>
<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>
<script>
var aobj=document.getElementById("alink");
aobj.innerHTML="<h1>google</h1>";
alert(aobj.innerHTML);
</script>
</body>
</html>
在火狐和IE中都是這個結果：
innerText就不能兼容IE和火狐了。
在IE中，之前的“baidu”被修改爲google，彈出的值也是google，只是加粗<b>不能顯示。
<html>
<body>
<a id="alink" href="http://www.brophp.com" target="_blank" title="this is test"><b>baidu</b></a>
<script>
var aobj=document.getElementById("alink");
aobj.href="www.baidu.com"
aobj.innerText="google";
alert(aobj.innerText);
</script>
</body>
</html>
結果如圖：
在火狐中，同樣的代碼同上
結果如圖：
並不能將之前的值設置爲新的值。 若將下面這行代碼屏蔽
// aobj.innerText="google";
則輸出的是“undefined”。如圖：
但是，在IE和火狐中可以使用另一個方法：textContent。textContent方法對IE和火狐是兼容的，
代碼：
<html>
<body>
<a id="alink" href="www.baidu.com" target="_blank" title="this is test"><b>baidu</b></a>
<script>
var aobj=document.getElementById("alink");
aobj.textContent="google";
alert(aobj.textContent);
</script>
</body>
</html>
輸出的結果都是：
若要使用innerText方法，並使火狐和IE兼容，可以寫一個轉換函數。
這是兄弟連高老師寫的一個函數：
<html>
<body>
<a id="alink" href="www.baidu.com" target="_blank" title="this is test">test</a>
<script>
var aobj=document.getElementById("alink");
ffie(aobj, "wwwwwwwwwwwww");
alert(ffie(aobj));
function ffie(obj, value){
if(document.all){
if(typeof(value)=="undefined")
return obj.innerText;
else
obj.innerText=value;
}else{
if(typeof(value)=="undefined")
return obj.textContent;
else
obj.textContent=value;
}
}
</script>
</body>
</html>
特別說明：
innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器，因此，儘可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標籤的內容，可以使用innerHTML取得包含HTML標籤的內容後，再用正則表達式去除HTML標籤，下面是一個簡單的符合W3C標準的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>