innerHTML、innerText和outerHTML、outerText的区别
生活随笔
收集整理的這篇文章主要介紹了
innerHTML、innerText和outerHTML、outerText的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、區別描述如下：?
innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML
outerHTML 設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位于對象起始和結束標簽內的文本
outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本
innerText和outerText在獲取時是相同效果，但在設置時，innerText僅設置標簽內的文本，而outerText設置包括標簽在內的文本。?
3、不同之處: ?
innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML
outerHTML 設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位于對象起始和結束標簽內的文本
outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本
innerText和outerText在獲取時是相同效果，但在設置時，innerText僅設置標簽內的文本，而outerText設置包括標簽在內的文本。?
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" ο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 同时
- 下一篇： JavaScript的求模、取整、小数的