The usage of InnerHTML, outerhtml, InnerText, Outertext and

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)" >innertext content </a>

<a href= "Javascript:alert (test.outerhtml)" >outerhtml content </a>

Test.innerhtml:

That is, the entire contents of the object from its starting position to the terminating position, including the HTML tag.

In the example above

The value of test.innerhtml is "<span style=" color:red ">test1</span> test2".

Test.innertext:

The content from the starting position to the terminating position, but it removes the HTML tag

The value of Text.innertext in the example above is "Test1 test2", where the span tag is removed.

Test.outerhtml:

In addition to the entire contents of the innerHTML, the object label itself is included. The value of text.outerhtml in the above example is <div id= "test" ><span style= "color:red" >test1</span> test2</div>

Test.outertext: Sets (including tags) or gets the text of the object (excluding the label).

Special Note:

innerHTML is a standard-compliant attribute, and innertext only works with Internet Explorer, so use innerHTML as much as possible, and less innertext, if you want to output content that does not contain HTML tags, you can use

innerHTML the contents of the HTML tag are obtained, the HTML tags are removed with regular expressions, for example

<a href= "Javascript:alert (document.getElementById (' Test '). Innerhtml.replace (/<.+?>/gim, '))" >

The difference between innerHTML and outerHTML, innertext and Outertext is that:

1), innerHTML, and outerhtml the HTML that is included when setting the content of the object is parsed, and innertext and outertext do not.

2), when set, innerHTML and innertext only set the text within the label, while outerHTML and Outertext set the text including the label.

The usage of InnerHTML, outerhtml, InnerText, Outertext and