javascript innerHTML、outerHTML、innerText、outerText的區別(轉)

時間 2019-11-10

標籤 javascript innerhtml outerhtml innertext outertext 區別欄目 JavaScript 简体版

原文原文鏈接

一、功能講解:
innerHTML 設置或獲取位於對象起始和結束標籤內的 HTML
outerHTML 設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位於對象起始和結束標籤內的文本
outerText 設置(包括標籤)或獲取(不包括標籤)對象的文本
二、示例
<html>
<head>
<title>Demo</title>
<style> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>設置或獲取位於對象起始和結束標籤內的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>設置或獲取位於對象起始和結束標籤內的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>設置或獲取對象及其內容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>設置(包括標籤)或獲取(不包括標籤)對象的文本.</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>
三、不一樣之處:
簡單的說innerHTML和outerHTML、innerText與outerText的不一樣之處在於：
1）、innerHTML與outerHTML在設置對象的內容時包含的HTML會被解析，而innerText與outerText則不會。
2)、在設置時，innerHTML與innerText僅設置標籤內的文本，而outerHTML與outerText設置包括標籤在內的文本。

特別說明：
　　innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器，所以，儘量地去使用innerHTML，而少用innerText，若是要輸出不含HTML標籤的內容，能夠使用innerHTML取得包含HTML標籤的內容後，再用正則表達式去除HTML標籤，下面是一個簡單的符合W3C標準的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>javascript

相關標籤/搜索

innerhtml&outerhtml&innertext&outertext

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。