1、功能講解:?
innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTML?
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式?
innerText 設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的文本 (不建議使用)
outerText 設(shè)置(包括標簽)或獲取(不包括標簽)對象的文本 （不建議使用）
?
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋體";color="blue";font-size="9pt"}
--> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
alert(test_id1.innerHTML);
test_id1.innerHTML="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
alert(test_id2.innerText);
test_id2.innerText="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標簽內(nèi)的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
alert(test_id3.outerHTML);
//設(shè)置完之后事件也被覆蓋了
test_id3.outerHTML="<i><u>設(shè)置或獲取對象及其內(nèi)容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
alert(test_id4.outerText);
//設(shè)置完之后事件也被覆蓋了
test_id4.outerText="<i><u>設(shè)置(包括標簽)或獲取(不包括標簽)對象的文本.</u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>
?
3、不同之處:?
簡單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：?
1）、innerHTML與outerHTML在設(shè)置對象的內(nèi)容時包含的HTML會被解析，而innerText與outerText則不會。?
2)、在設(shè)置時，innerHTML與innerText僅設(shè)置標簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標簽在內(nèi)的文本。?
?
特別說明：?
innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器 ， 因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標簽的內(nèi)容，可以使用innerHTML取得包含HTML標簽的內(nèi)容后，再用正則表達式去除HTML標簽，下面是一個簡單的符合W3C標準的示例：?
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
