The difference between innerHTML, innerText and outerHTML in JavaScript

Recently summarized some JavaScript knowledge and shared it with everyone. This article mainly talks about the usage differences of innerHTML, innerText and outerHTML in JavaScript. It has certain reference value. Friends in need can take a look. I hope it can help you.

Usage:

<div id="test">
   <span style="color:red">test1</span> test2
</div>

can be used in JS:

test.innerHTML:

That is, from the beginning of the object All content from the position to the end position, including Html tags.

The value of test.innerHTML in the above example is "test1 test2 ".

test.innerText:

Content from the starting position to the ending position, but it removes the Html tag

text.innerTest in the above example The value is "test1 test2", with the span tag removed.

test.outerHTML:

In addition to containing the entire content of innerHTML, it also contains the object tag itself.

The value of text.outerHTML in the above example is

test1 test2

Complete example:

<div id="test">
   <span style="color:red">test1</span> test2
</div>
innerHTML内容
inerHTML内容
outerHTML内容

Special note:

innerHTML is an attribute that complies with W3C standards, and innerText is only applicable to IE browsers, so as long as Use innerHTML when possible, and use innerText less. 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 HTML tags. The following is a simple W3C standard-compliant Example:

No HTML , complies with W3C standards.

The above is the detailed content of The difference between innerHTML, innerText and outerHTML in JavaScript. For more information, please follow other related articles on the PHP Chinese website!