The difference between InnerHTML, innertext and outerHTML, outertext

Original: http://walsh.iteye.com/blog/261966

InnerHTML, innertext and outerhtml, outertext Difference Blog classification:

• Css/html

Html 1. The difference is described as follows:

• InnerHTML Sets or gets the HTML that is located within the start and end tags of the object
• outerHTML Sets or gets the HTML form of an object and its contents
• InnerText set or get text that is within the start and end tags of an object
• Outertext set (including tags) or get (excluding tags) the text of an object

InnerText and outertext are the same effect when they are acquired, but when set, innertext only sets the text within the label, and the outertext sets the text including the label.
2. Sample CodeHTML code

2. <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">   
4. < HTML >   
6. < Head >   
8. < Meta http-equiv="Content-type" Content= "text/html; Charset=utf-8 ">
10. < title > the difference between InnerHTML, outerhtml and innertext, outerHTML </ title >   
12. < Script language="JavaScript" type=" Text/javascript ">
14. . InnerHTML
16. function Innerhtmldemo ()
18. {
20. 　　　test_id1.innerhtml = <i><u> set or get html.</u></i> in the start and end tags of the object   ;
22. }
24. . innerText
26. function Innertextdemo ()
28. {
30. 　　　Test_id2.innertext = <i><u> Sets or gets the text that is within the start and end tags of the object .</u></i>   ;
32. }
34. . outerhtml
36. function Outerhtmldemo ()
38. {
40. 　　　test_id3.outerhtml = "<font size=9pt color=red><i><u> Sets or gets the HTML form of the object and its contents .</u></i></font>"   ;
42. }
44. . outertext
46. function Outertextdemo ()
48. {
50. 　　　Test_id4.outertext = "<br></br><i><u> set (including tags) or get (excluding tags) the text of the object .</u></i>"   ;
52. }
54. 　　</ Script >    
56. 　　</ Head >    
58. 　　< Body >    
60. 　　< ul >    
62. < li   id = "TEST_ID1"   onclick = "Innerhtmldemo ()" > The innerHTML effect. </ li >    
64. < li   id = "Test_id2"   onclick = "Innertextdemo ()" > The innertext effect. </ li >    
66. < li   id = "TEST_ID3"   onclick = "Outerhtmldemo ()" > The outerhtml effect. </ li >    
68. 　　< Li id="Test_id4" onclick="Outertextdemo ()" >outertext effect. </ Li >    
70. 　　</ ul >    
72. 　　</ Body >    
74. 　　</ HTML >   

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 3, the difference:In a nutshell, the difference between innerHTML and outerHTML, innertext and Outertext is that: 1), innerHTML, and outerhtml the HTML that is included in setting the object's content is parsed. 　　 and innertext and outertext are not.     2), when set, innerHTML and innertext only set the text within the label, while outerHTML and Outertext set the text including the label. For a DIV with an ID of "Testdiv", the difference between outerhtml, innerHTML, and innertext can be demonstrated by: