|
|
innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式
innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本
outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本
2、示例
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋體";color="blue";font-size="9pt"}
--> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>設(shè)置或獲取對象及其內(nèi)容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本.</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è)置標(biāo)簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標(biāo)簽在內(nèi)的文本。
特別說明：
innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標(biāo)簽的內(nèi)容，可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后，再用正則表達(dá)式去除HTML標(biāo)簽，下面是一個簡單的符合W3C標(biāo)準(zhǔn)的示例：
<a href="Javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標(biāo)準(zhǔn)</a>
JavaScript技術(shù)：javascript innerHTML、outerHTML、innerText、outerText的區(qū)別，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
