There are two properties in the document object, innerHTML and innerText, both of which obtain the text content of the document object, but there are differences in their use;
Difference
1) innerHTML sets or gets the HTML + text information contained in the tag (all content from the starting position to the ending position of the tag, including the HTML tag, but not including itself)
2) outerHTML sets or gets the tag itself and the HTML + text information it contains (including itself)
3) innerText sets or gets the text information contained in the label (content from the starting position of the label to the ending position, removing the HTML tag, but not including itself)
4) outerText sets or gets the label itself and the text information it contains (including itself)
innerText and outerText have the same effect when obtained. But when setting, innerText only sets the text contained in the label, while outerText sets the text including the label itself.
Example 1: The difference between outerHTML and innerHTML
document.body.outerHTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>aa</div>
<script type="text/javascript">
alert(document.body.outerHTML);
</script>
</body>
</html>
result:
document.body.innerHTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>aa</div>
<script type="text/javascript">
alert(document.body.innerHTML);
</script>
</body>
</html>
result:
It can be concluded from different results that the outerHTML attribute contains more tags than the innerHTML attribute.
Something else to note is:
innerHTML is a property supported by all browsers. The outerHTML attribute is not a DHTML standard and is not supported by browsers other than IE.
In non-IE browsers, you must use the extension method to obtain it. The extension method is as follows:
if(typeof(HTMLElement)!="undefined" & amp; & amp; !window.opera)
{
var pro = window.HTMLElement.prototype;
pro.__defineGetter__("outerHTML", function(){
var str = "<" + this.tagName;
var a = this.attributes;
for(var i = 0, len = a.length; i < len; i + + )
{
if(a[i].specified)
{
str + = " " + a[i].name + '="' + a[i].value + '"';
}
}
if(!this.canHaveChildren)
{
return str + " />";
}
return str + ">" + this.innerHTML + "</" + this.tagName + ">";
});
pro.__defineSetter__("outerHTML", function(s){
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
}
The difference between innerHTML and innerText
innerText and outerText have the same effect when obtained, but when setting, innerText only sets the text contained in the label, while outerText sets the text including the label itself.
Sample code:
Open through IE browser, the pop-up content is hello world and hello world
When opened through the Firefox browser, the pop-up content is hello world and undefined
Open through the chrome browser, the pop-up content is hello world and hello world
alert(content.outerHTML) pops up:
hello world
Example 2:
Open through IE browser, the pop-up content is
hello world
and hello world
hello world
“and”hello world”
hello world
“and”hello world”
Open through Firefox browser, the pop-up content is
hello world
and undefined
hello world
“and”undefined”
hello world
“and”undefined”
Open it through the chrome browser, and the pop-up content is
hello world
and hello world
hello world
“and”hello world”
hello world
“and”hello world”
alert(content.outerHTML) pops up:
hello world
hello world
“
hello world
“
To sum up:
innerHTML is supported by all browsers, innerText is supported by IE browser, but not Firefox browser.
the difference:
1) When innerHTML and outerHTML set the content between tags, the included HTML will be parsed; while innerText and outerText will not;
2) innerHTML and innerText only set the text between tags, while outerHTML and outerText set the text including their own tags.
Summary
innerHTML is an attribute that complies with W3C standards, while innerText is only applicable to IE browser (now also adapted to chrome browser), therefore,
use as much as possible
innerHTML, and less use of innerText. If you want to output content without HTML tags, you can use innerHTML to obtain the content containing HTML tags, and then use regular expressions to remove the HTML tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--Declares the encoding set UTF-8 of the current web page-->
<meta name="Generator" content="EditPlus?"> <!--The name of the editor-->
<meta name="Author" content="Who is the author">
<meta name="Keywords" content="Keywords">
<meta name="Description" content="Description and Introduction">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.fl_l{float: left}
.clearfix:after{clear: both;content: "";display: block}
.main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink}
p{width: 200px;height: 200px;box-shadow: 0 0 10px 0 blue;margin: 10px}
</style>
</head>
<body>
<div class="main">
<div class="compare1 clearfix" >
<p class="fl_l" id="innerHTML_1">innerHTML_1</p>
<p class="fl_l" id="innerText_1">innerText_1</p>
</div>
<div class="compare2 clearfix">
<p class="fl_l" id="innerHTML_2">innerHTML_2</p>
<p class="fl_l" id="innerText_2">innerText_2</p>
</div>
</div>
<script>
var innerHTML_1 = document.getElementById("innerHTML_1");
var innerText_1 = document.getElementById("innerText_1");
var innerHTML_2 = document.getElementById("innerHTML_2");
var innerText_2 = document.getElementById("innerText_2");
innerHTML_1.onmouseover = function () {
this.innerHTML = "innerHTML_1 function";
}
innerText_1.onmouseover = function () {
this.innerText = "innerText_1 function";
}
innerHTML_2.onmouseover =function () {
this.innerHTML = "<span style='color: red'>innerHTML_2 function<span>";
}
innerText_2.onmouseover = function () {
this.innerText = "<span style='color: red'>innerHTML_2 function<p>";
}
</script>
</body>
</html>
As you can see from the above, if from plain text From a perspective, innerHTML and innerText are the same, because there is no difference when adding data such as strings.
But if you load it from the perspective of tags, innerHTML can parse tags, that is, you can load tags dynamically, but innerText is indeed displayed in the form of text.
This is the main difference between them. Although you can add content in tags, different application scenarios require different tab pages.
hello world
“
hello world
“
From the perspective of understanding, innerHTML and innerText are the same, because there is no difference when adding data such as strings.
But if you load it from the perspective of tags, innerHTML can parse tags, that is, you can load tags dynamically, but innerText is indeed displayed in the form of text.
This is the main difference between them. Although you can add content in tags, different application scenarios require different tab pages.
hello world
“
hello world
“
Study plan arrangement
I have divided it into six stages in total, but it does not mean that you have to learn them all before you can start working. For some entry-level positions, it is enough to learn the third and fourth stages~
Here I have integrated and compiled a [282G] network security information package from basic entry to advanced. Friends who need it can scan the CSDN official cooperation QR code below to get it for free. Share it for free! ! !
If you are interested in getting started with cybersecurity, you can
Click hereThe major benefits of network security: entry & advanced full set of 282G learning resource package for free sharing!
①Network security learning route
②Hundreds of penetration testing e-books
③Security Attack and Defense 357 pages of notes
④50 Security Offense and Defense Interview Guides
⑤Security Red Team Penetration Toolkit
⑥Summary of experience in HW network protection operations
⑦100 practical cases of vulnerabilities
⑧Internal video resources of major security manufacturers
⑨Analysis of past CTF capture the flag competition questions
