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

最後更新：2014-05-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style blog class code java tar

原文:http://walsh.iteye.com/blog/261966

innerHTML、innerText和outerHTML、outerText的區別 部落格分類：

CSS/HTML

HTML 1、區別描述如下：

innerHTML 設定或擷取位於對象起始和結束標籤內的 HTML
outerHTML 設定或擷取對象及其內容的 HTML 形式
innerText 設定或擷取位於對象起始和結束標籤內的文本
outerText 設定(包括標籤)或擷取(不包括標籤)對象的文本

innerText和outerText在擷取時是相同效果，但在設定時，innerText僅設定標籤內的文本，而outerText設定包括標籤在內的文本。
2、範例程式碼 Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML和innerText、outerHTML的區別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
test_id1.innerHTML="設定或擷取位於對象起始和結束標籤內的 HTML.";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
test_id2.innerText="設定或擷取位於對象起始和結束標籤內的文本.";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
test_id3.outerHTML="設定或擷取對象及其內容的 HTML 形式.";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
test_id4.outerText=" 設定(包括標籤)或擷取(不包括標籤)對象的文本.";
　　}
</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>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>innerHTML、outerHTML和innerText、outerHTML的區別</title><script language="JavaScript" type="text/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="<font size=9pt color=red><i><u>設定或擷取對象及其內容的 HTML 形式.</u></i></font>"; 　　}　　//.outerText　　function outerTextDemo()　　{ 　　　test_id4.outerText="<br></br><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>

3、不同之處:　簡單的說innerHTML和outerHTML、innerText與outerText的不同之處在於：　　1）、innerHTML與outerHTML在設定對象的內容時包含的HTML會被解析，而innerText與outerText則不會。　　 2)、在設定時，innerHTML與innerText僅設定標籤內的文本，而outerHTML與outerText設定包括標籤在內的文本。對於一個id為"testdiv"的div來說，outerHTML、innerHTML以及innerTEXT三者的區別可以通過展示出來：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

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

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support