Differences and usage of outerhtml, innerhtml, and innertext

Find an article on others' blogs to briefly introduce the differences and usage of outerhtml, innerhtml, and innertext. Let's share it with you.

The usage of outerhtml is different from that of innerhtml. outerhtml includes the entire tag, not limited to the content inside the tag. For a div whose ID is "testdiv", the differences among outerhtml, innerhtml, and innertext can be shown as follows:

1. Grid. getcell (I, 3). innerhtml; curobj. nextsibling. innerhtml

The innerhtml attribute does not automatically encode special characters in and out of HTML entities. HTML entities allow special characters (such as <characters) to be displayed. Generally, the browser interprets these characters as special characters. <Characters are interpreted as the beginning of a flag and are not displayed on the page. To display the <character, the object is required <.

For example, if the innerhtml attribute is set to "<B> Hello </B>", the <and> characters are not converted to <and>. The displayed output is <B> Hello </B>. The browser displays the <B> mark and "hello" Text in bold.

Warning because the text is not HTML encoded, scripts can be embedded in the HTML tag of the text. If this attribute is dynamically set using user input, verify its value to reduce security vulnerabilities.
To provide automatic HTML encoding and decoding, use the innertext attribute.

The above is introduced on a Microsoft website, and the author simply thinks that the HTML format is used.

2. typename = temp. options [temp. selectedindex]. innertext; document. all ("B1 "). innertext = "close"; name = name_other.options [I]. innertext; fig. innertext = namearray [I];

Use the innertext attribute to programmatically modify the content between the start and end tags of the HTML Server Control.

Unlike the innerhtml attribute, the innertext attribute automatically encodes special characters in and out of HTML entities. HTML entities allow special characters (such as <characters) to be displayed. Generally, the browser interprets these characters as special characters. <Characters are interpreted as the beginning of a flag and are not displayed on the page. To display the <character, the object is required <.

For example, if the innertext attribute is set to "<B> Hello </B>", the <and> symbols are converted to <and>. The displayed output is <B> Hello </B>. <And> the entity instructs the browser that these characters will be displayed on the page. The browser does not detect the <B> flag and displays the text in bold. The text displayed on the page is: <B> Hello </B>.

To place automatic HTML encoding and decoding, use the innerhtml attribute.

In my opinion, it is the value of the obtained text.

**************************************** ****************
What is the role of innerhtml and innertext?
Javascript can control the display of text in an HTML form, such as text and textarea,
For example, document. All. Form ID. value = "ABC ";

But how do I control the text displayed on the page?

In this case, innerhtml or innertext is used.

<Div id = "div1"> </div> <p>
<Div id = "div2"> </div>

<SCRIPT>
Document. All. div2.innertext = "<font color = # ff0000> AAA </font>"; // It can be dynamically modified in plain text format.
Document. All. div1.innerhtml = "<font color = # ff0000> AAA </font>"; // in HTML format, dynamically generate a table.

</SCRIPT>
Case Sensitive