innerHTML attribute, outerhtml attribute, textcontent attribute, innertext attribute distinction detailed

This article mainly introduced the JavaScript innerHTML attribute, outerhtml attribute, textcontent attribute, innertext attribute difference detailed explanation, all is the personal experience summary, shares to everybody, hoped everybody can like.

The innerHTML property is used to read or set the HTML code within a node.

When the outerHTML property is used to read or set the HTML code, the node itself is included.

The Textcontent property is used to read or set the text content that the node contains.

The InnerText property and the Outertext property have different values when reading the textual content of an element node. The difference is that when you set the Text property of a node, the Outertext property causes the original element node to be replaced by the text node. Note that innertext is not a standard attribute and Firefox is not supported.

1.innerText is affected by CSS, Textcontent does not have this problem. For example, if a CSS rule hides a piece of text, innertext does not return the text, and Textcontent returns.

2.innerText The returned text, will filter out spaces, line and enter, Textcontent will not

The 3.innerText property is not part of the DOM Standard, and the Firefox browser does not even deploy this property, and Textcontent is part of the DOM standard.

The above is the entire content of this article, I hope to learn more familiar with JavaScript can help.