標籤：button 動態網頁 其他 javascrip innerhtml 執行個體 文本 onclick 表格
一、innerText屬性用來定義對象所要輸出的文本，在本例中innerText把對象it中的文本“您喜歡看微微一笑很傾城嗎？”變成了“超級喜歡！”（語句it.innerText="超級喜歡！"）。而對對象ih的改變用了innerHTML 屬性，它除了有innerText的作用外，還可改變對象ih內部的HTML語句，於是它把文本變成了“肖奈!”，而且文本輸出改成了斜體（<i></i>）並加粗（<b></b>），即語句ih.innerHTML="<i><b>肖奈!</b></i>"。
<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.itd"><html><head> <meta charset="UTF-8"> <title>innerText和innerHTML用法執行個體</title></head><body><p><span style="color:red;">請點擊下邊的文字……</span><ul> <li id="it" onclick="changeText()">您喜歡看微微一笑很傾城嗎? </li> <li id="ih" onclick="changeHtml()">您叫什麼名字? </li> <li onclick="back()">恢複原樣! </li></ul></body><script type="text/javascript"> function changeText() { it.innerText="超級喜歡!"; }//function function changeHtml() { ih.innerHTML="<i><b>肖奈!</b></i>"; }//function function back() { it.innerText="您喜歡看微微一笑很傾城嗎? "; ih.innerHTML="您叫什麼名字?"; }</script></html>
二、下例的效果是先在文字框中輸入文本，然後按“輸出文本”的按鈕，接著網頁便會自動輸出您所輸入的文本
<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.itd"><html><head> <meta charset="UTF-8"> <title>用innerText和innerHTML製作動態網頁</title></head><body><form name="frm"> <p> <span style="color:red;">請在文字框中輸入文字:</span><br/><br/> <label>第一個文字框:</label><input type="text" name="txt" size="50"/><br/><br/> <label>第二個文字框:</label> <input type="text" name="txt2" size="20"/> <br><br/> <input type="button" value="輸出two文本" name="B1" style="color:blue;" onclick="OutputText()"> </p></form><p id="Output"> 在此處輸出文本：</p></body><script type="text/javascript"> function OutputText() { if(frm.txt2.text!="") { Output.innerHTML="在此處輸出文本：<b>"+frm.txt2.value+"</b>";} //Output為一對象。 else { Output.innerText="在此處輸出文本：";}// if(frm.txt2!="") {// Output.innerHTML="在此處輸出文本：<b>"+frm.txt2.value+"</b>";} //Output為一對象。// else {// Output.innerText="在此處輸出文本：";}// if(frm.txt2.value!="") {// Output.innerHTML="在此處輸出文本：<b>"+frm.txt2.value+"</b>";} //Output為一對象。// else {// Output.innerText="在此處輸出文本：";} }</script></html>
總結：
innerText和innerHTML擷取元素的內容。如果元素只包含文本，那麼innerText和innerHTML返回相同的值。但是，如果同時包含文本和其他元素，innerText將只返迴文本的表示，而innerHTML，將返回所有元素和文本的HTML代碼。下面的表格列出了根據特定代碼innerText和innerHTML返回的不同值。
| 代碼 | innerText | innerHTML |
| <div>Hello world</div> | "Hello world" | "Hello world" |
| <div><b>Hello</b>world</div> | "Hello world" | "<b>Hello</b>world" |
| <div><span></span></div> | "" | "<span></span>" |
最後，通過將innerText賦值給它自身，表示從指定的元素中刪除所有的HTML標籤。
oDiv.innerText = oDiv.innerText;
補充：innerText、innerHTML、outText、outHTML終極PK
一、功能介紹：
innerHTML 設定或擷取位於對象起始和結束標籤內的 HTML
outerHTML 設定或擷取對象及其內容的 HTML 形式
innerText 設定或擷取位於對象起始和結束標籤內的文本
outerText 設定(包括標籤)或擷取(不包括標籤)對象的文本
二、樣本參考
<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.itd"><html><head><meta charset="UTF-8"><title>innerText、innerHTML、outText、outHTML</title></head><body><p style="color:lawngreen;" >請點擊下面列表變身：</p><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> <script language="JavaScript"> //.innerHTML function innerHTMLDemo() { test_id1.innerHTML="<i><b>設定或擷取位於對象起始和結束標籤內的 HTML.</b></i>"; } //.innerText function innerTextDemo() { test_id2.innerText="<i><b>設定或擷取位於對象起始和結束標籤內的文本.</b></i>"; } //.outerHTML function outerHTMLDemo() { test_id3.outerHTML="<i><b>設定或擷取對象及其內容的 HTML 形式.</b></i>"; } //.outerText function outerTextDemo() { test_id4.outerText="<i><b>設定(包括標籤)或擷取(不包括標籤)對象的文本.</b></i>"; } </script> </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標籤的內容後，再用Regex去除HTML標籤。
innerHTML與innerText的PK
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
