Use and difference of innerhtml, innertext, and outerhtml in JS

Usage:

<Div id = "test">
<Span style = "color: Red"> test1 </span> Test2
</Div>

In JS, you can use:

Test. innerhtml:

That is, all content from the starting position of the object to the ending position, including HTML tags.

In the preceding example, the value of test. innerhtml is "<span style =" color: Red "> test1 </span> Test2 ".

Test. innertext:

Content from the starting position to the ending position, but it removes the HTML Tag

In the preceding example, the value of text. innertest is "test1 Test2", in which the span tag is removed.

Test. outerhtml:

In addition to all the content of innerhtml, it also contains the object tag itself.

In the preceding example, the value of text. outerhtml is <Div id = "test"> <span style = "color: Red"> test1 </span> Test2 </div>.

Complete example:

<Div id = "test">
<Span style = "color: Red"> test1 </span> Test2
</Div>

<A href = "javascript: Alert (test. innerhtml)"> innerhtml content </a>
<A href = "javascript: Alert (test. innertext)"> inerhtml content </a>
<A href = "javascript: Alert (test. outerhtml)"> outerhtml content </a>