Innerhtml,innertext,outerhtml,outertext,value Analysis

The first is an example:

<div id= "AA" >0<br/>0<span>11</span>22</div>
<input type= "button" onclick= "A ()"/>

Console.log (document.getElementById ("AA"). InnerHTML);
Console.log (document.getElementById ("AA"). InnerText);
Console.log (document.getElementById ("AA"). outerHTML);
Console.log (document.getElementById ("AA"). Outertext);

Output:

0<br>0<span>11</span>22
0
01122
<div id= "AA" >0<br>0<span>11</span>22</div>
0
01122

Annotations:

Get:

These four properties are used in Input,textarea to get the null value, you have to use value to get!

InnerHTML: Elements inside HTML content, from the start tag > to the end tag < (excluding the label itself)

InnerText: The contents of the tag are excluded, from the > of the start tag to the end tag < (excluding the label itself) string type, the line break will be preserved

Low version FF does not support innertext, but can be used as an alternative to textcontent

outerHTML: Includes HTML content for the element itself

Outertext: Includes HTML text for the element itself, in general with innertext

--------------------------------------------------------------------------------------------------------------- -

Set up:

All of the above properties can be set

With the innertext setting, elements inside elements are replaced with set strings!

With the Outertext setting, the element and its child elements will be replaced with the set string!

Innerhtml,innertext,outerhtml,outertext,value Analysis