Usage and differences of innerHTML, innerText and outerHTML in JavaScript_javascript skills

No more nonsense, please see the examples below.

Usage:

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

Can be used in JS:

test.innerHTML:

That is, everything from the starting position to the ending position of the object, including the Html tag.

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

The value of text.innerTest in the above example 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 also

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

Full example:

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

Special instructions:

InnerHTML is an attribute that complies with W3C standards, while innerText is only applicable to IE browsers. Therefore, use innerHTML as much as possible and less innerText. If you want to output content that does not contain HTML tags, you can use innerHTML to obtain HTML that contains After removing the content of the tag, use regular expressions to remove the HTML tag. Here is a simple example that complies with W3C standards:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+&#63;>/gim,''))">无HTML,符合W3C标准</a>

How to distinguish innerHTML and innerText?

Sample code:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a 
href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a 
href="javascript:alert(test.innerText)">inerHTML内容</a> 

Common points: innerHTML and innerText will replace the content within the element.

Differences:

1, innerHTML:

That is, the entire content from the starting position to the ending position of the object, including the Html tag.

The value of test.innerHTML in the above example is "0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114
test2”.

2, innerText:

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

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

It is worth noting that innerHTML is an attribute that complies with W3C standards, while innerText is only applicable to IE browsers. Therefore, use innerHTML as much as possible and innerText less. If you want to output content without HTML tags, you can After using innerHTML to obtain the content containing HTML tags, use regular expressions to remove the HTML tags.

The above is an introduction to the usage and differences of innerHTML, innerText, and outerHTML in JavaScript. I hope you like it.