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 "0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114 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 024ec8e648c1f06980a2d32e6dcf0f0b0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114 test216b28748ea4df4d9c2150843fecfba68

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:

33c223e7f941562df66a891e54a2406a/gim,''))">No HTML , complies with W3C standards5db79b134e9f6b82c0b36e0489ee08ed.

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!