Differences between innerHTML, outerHTML, innerText, and outerText

I saw this question again during the interview today. I will summarize it for your reference:


Conceptual issues
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


Operation Analysis

<Ul> <li id = "io"> initial display </li> </ul>

Io. innerHTML = "<I> <u> sets or retrieves HTML in the object's start and end tags. </u> </I> "; (the execution result is as follows)

<Ul> <li id = "io"> <I> <u> sets or obtains the HTML in the object's start and end tags. </u> </I> </li> </ul>

The <I> <u> label is resolved (<I> <u> is not displayed on the page)

Io. outerHTML = "<I> <u> set or obtain the HTML format of the object and its content. </u> </I>"; (the following is the execution result)

<Ul> <I> <u> sets or obtains the HTML format of the object and its content. </u> </I> </ul>

The <I> <u> label is resolved (<I> <u> is not displayed on the page)

Io. innerText = "<I> <u> sets or obtains the text in the object's start and end labels. </u> </I> "; (the execution result is as follows)

<Ul> <li id = "io"> "<I> <u> sets or obtains the text in the start and end labels of an object. </u> </I> "</li> </ul>

The <I> <u> label is not resolved (<I> <u> is displayed on the page)

Io. outerText = "<I> <u> sets (including tags) or retrieves (excluding tags) the text of an object. </u> </I> "; (the execution result is as follows)

<Ul> "<I> <u> set (including tags) or get (excluding tags) the text of an object. </u> </I>" </ul>

The <I> <u> label is not resolved (<I> <u> is displayed on the page)

Summary of the above usage differences
InnerHTML and outerHTML will be parsed when setting the object content, while innerText and outerText will not.
InnerHTML and innerText only set the text in the tag, while outerHTML and outerText set the text including the tag.

Note:
InnerHTML is a W3C standard attribute, while innerText is only applicable to IE browsers.