Javascript-innerhtml, innertext:, outerhtml

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>

Note:

Innerhtml is a W3C standard attribute, while innertext is only applicable to IE browsers. Therefore, try
Use innerhtml instead of innertext. to output content without HTML tags, use innerhtml to obtain the content containing HTML tags, and then use
The expression removes HTML tags. The following is a simple example that complies with W3C standards:

<A href = "javascript: Alert (document. getelementbyid ('test'). innerhtml. Replace (/<. ++?> /Gim, '')"> no html, compliant with W3C standards </a>

 

Reprinted from: http://www.phpweblog.net/kiyone/archive/2007/05/17/1206.aspx