當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

innerHTML、innerText和outerHTML、outerText的区别

發布時間：2025/3/11 HTML 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 innerHTML、innerText和outerHTML、outerText的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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" οnclick="innerHTMLDemo()">innerHTML效果.</li> <li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li> <li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li> <li id="test_id4" οnclick="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三者的區別可以通過下圖展示出來：

總結

以上是生活随笔為你收集整理的innerHTML、innerText和outerHTML、outerText的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： servlet 和 struts2 同时
下一篇： HTML，，，音乐，html embed