outerHTML, innerHTML and innertext differences in JavaScript

Sample code:

The code is as follows	Copy Code
<div id= "Test" > <span style= "color:red" >test1</span> test2 </div>

In JS can be used:

The code is as follows	Copy Code
document.getElementById (' Test '). InnerHTML:

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

The return value in the previous example: <span style= "color:red" >test1</span> test2

The code is as follows	Copy Code
document.getElementById (' Test '). innertext:

(Note: InnerText only applies to IE browser, so try not to use innertext)

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

The return value in the previous example: Test1 test2, where the span label was removed.

The code is as follows	Copy Code
document.getElementById (' Test '). outerHTML:

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

The return value in the previous example: <div id= "test" ><span style= "color:red" >test1</span> test2</div>

Firefox does not support JS innerHTML

The original code is as follows:

The code is as follows	Copy Code
<span id= "Ad_1" ></span> <span id= "Ad_11" style= "Visibility:hidden;" > <script language= "JavaScript" src= "/js/ad_1.js" ></script> </SPAN> <script>ad_1.innerhtml=ad_11.innerhtml;ad_11.innerhtml= "";</script>

The above code in IE, Chrome and other browsers can be the correct execution of the replacement, but under Firefox can not. In fact, the solution is also very simple, let us follow the ECMAScript specification to write code. The code above is fixed to the following:

The code is as follows	Copy Code
<span id= "Ad_1" ></span> <span id= "Ad_11" style= "Visibility:hidden;" > <script language= "JavaScript" src= "/js/ad_1.js" ></script> </SPAN> <script>document.getelementbyid ("Ad_1"). Innerhtml=document.getelementbyid ("Ad_11"). InnerHTML; document.getElementById ("Ad_11"). Innerhtml= "";</script>

Instead of using div or span IDs directly, you can use document.getElementById ("div_id") to perform the substitution. In addition, Firefox does not support the innertext attribute.