The usage and Difference _javascript skill of innerhtml,innertext,outerhtml in JavaScript

No nonsense, please see the example below.

Usage:

<div id= "Test" > 
 <span style= "color:red" >test1</span> test2 
</div>

In JS can be used:

Test.innerhtml:

That is, everything from the start position of the object to the ending position, including the HTML tag.

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

Test.innertext:

The content from the start position to the ending position, but it removes the HTML tag

The value of the text.innertest in the example above is "Test1 test2", where the span label is removed.

Test.outerhtml:

In addition to the full contents of the innerHTML, the object label itself is included.

The value of the text.outerhtml in the example above 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>

Special Note:

innerHTML is an attribute that conforms to the standard of the web, and innertext only applies to IE, 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 to get content that contains HTML tags, and then use regular expressions to remove HTML tags, and here is a simple example that meets the requirements of the international Standards of the Consortium:

<a href= "Javascript:alert (document.getElementById (' Test '). Innerhtml.replace (/<.+?>/gim, ')" > No HTML, Conforming to the </a> of the International Consortium

How do innerHTML and innertext differentiate?

Sample code:

<div id= "Test" > 
<span style= "color:red" >test1</span> test2 
</div> 
<a 
Href= "Javascript:alert (test.innerhtml)" >innerhtml content </a> 
<a 

In common: bothinnerHTML and innertext Replace the contents of the elements.

Different points:

1,innerhtml:

That is, everything from the start position of the object to the ending position, including the HTML tag.

The value of the test.innerhtml in the example above is "<span style=" color:red ">test1</span>
Test2 ".

2,innertext:

The content from the start position to the ending position, but it removes the HTML tag

The value of the text.innertest in the example above is "Test1 test2", where the span label is removed.

It's worth noting that innerHTML is an attribute that conforms to the standard of the web, and innertext only applies to IE, so try to use innerHTML as much as possible, rather than innertext, if you want to output content that does not contain HTML tags, You can use innerHTML to get content that contains HTML tags, and then use regular expressions to remove HTML tags.

Above is to introduce the usage and the difference of innerhtml,innertext,outerhtml in JavaScript, hope everybody likes.