Home > Web Front-end > JS Tutorial > body text

The difference between innerHTML, innerText and outerHTML in JavaScript

yulia
Release: 2018-09-14 17:25:36
Original
1645 people have browsed it

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>
Copy after login

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内容
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template