Differences between innerHTML, outerHTML, innerText, and outerText

Beginners may be confused about innerHTML, outerHTML, innerText, and outerText. Here we will explain: innerHTML & amp; nbsp; Sets or obtains & amp; nbsp; located in the start and end tags of the object; HTML & amp; n

Beginners may be confused about innerHTML, outerHTML, innerText, and outerText:
InnerHTML sets or obtains the HTML in the start and end tags of an object.
OuterHTML sets or obtains the HTML format of the object and its content
InnerText sets or obtains the text in the object's start and end labels.
OuterText setting (including tags) or obtaining (excluding tags) the text of an object

The differences between innerHTML and outerHTML are well understood:
But not many people know the differences between innerText and outerText. Let's look at the following code:

 
  
Fieldset content
  Span content -phpddt.com
 

If you only obtain the text in the tag, it is obvious that the values of innerText and outerText are the same. The preceding example is used to describe:

From the test, we can see the difference between innerText and outerText. innerText converts all the content of the label into text, and outerText replaces the entire including label with text.
Note: In addition, innerHTML is usually used during development, because innerText has poor compatibility.