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:
Copy Code code as follows:
<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
Copy Code code as follows:
<frameset frameborder= "yes" frameborder= "1" rows= "40%,*" >
<frame name= "Top" src= "1.html" >
<frame name= "Bottom" src= "2.html" >
</frameset>
<script language= "JavaScript" >
function init ()
{
var AAA = parent.window.frames[0].document.body.innerhtml;
Alert (AAA);
}
</script>
<body>
<p align= "center" >nothing</p>
<p align= "center" ><input type= "button" onclick= "init ()"; Value= "click" ></p>
</body>
