Similarities and differences between javascript textContent and innerText

Differences between textContent and innerText

IE has an innerText attribute, and FF has a textContent attribute. Many of the scripts previously written to IE cannot find the innerText attribute under FF. Therefore, we recommend that you use textContent instead. The same is true for writing scripts to FF.

But in fact, there is a misunderstanding here. Many articles on the Internet say that "the attribute equivalent to the innerText attribute in FF is textContent"-but not in fact. There are several important differences between innerText and textContent, so they cannot be directly exchanged in some cases.

I wrote a code highlighting JS plug-in a few days ago. It works perfectly in IE, but it is not correct in FF. In IE, the innerText attribute is used, while in FF, The textContent attribute is used. The difference between string processing results in completely different results. So I wrote something specifically to test the differences between the two.

The test results show that:
InnerText: The content is actually what you see in your browser. Its value is the result explained by the browser: it finally shows the innerHTML of the element, and then removes the plain text left by the information in various formats. It will replace <br/> with a line break and combine multiple spaces into one space, but the original line break will not cause a line break, IE treats it as a normal word boundary (usually a space ). The value of the innerText attribute of an element is consistent with the content copied and pasted into notepad.

TextContent: The content is the content after innerHTML removes all tags (I suspect this is an attribute copied from XMLDOM, with identical features ). It will change the escape characters (<, or something) in innerHTML, but does not explain any html tags, but directly remove them. It also does not convert the text in innerHTML to the HTML format. For example, multiple spaces are retained originally and not merged into one space, line breaks still exist (on the contrary, <br/> does not cause line breaks ).

More concise summary: innerText in IE requires the innerHTML value:
1. HTML Escape (equivalent to XML escape, processing escape characters such as <);
2. After HTML explanation and CSS style explanation;
3. format information is removed later.
The plain text left behind.
The textContent in FF does not have two or three steps. After HTML escaping, all html labels are removed and the plain text is obtained.

Example:
Copy codeThe Code is as follows:
<Div id = "T1">
ABCD
Efg hij <br/> KLM N
OPQ <div> RS </div> T
T
<Div>

Div with id T1,
The value of the innerText attribute in IE is:
Copy codeThe Code is as follows:
ABCD EFG HIJ
KLM N OPQ
RS
T

The property value of textContent in FF is:
Copy codeThe Code is as follows:
(There is a line feed here)
ABCD
EFG HIJKLM N
OPQRST
T

Note that the div contains a nested div, which better reflects the different processing methods of the innerText and FF textContent of IE:
Div is a block element and exclusive to one row by default. Therefore, innerText in IE is reflected as RS exclusive to one row in the preceding div, while textContent of FF completely ignores HTML format, therefore, the RS in its textContent is connected with other characters, and the row is not exclusive.

For more information, see the following interesting results:
If you add a style = "float: left;" to the div inside, the div will change from the block element to the Row Element and no longer exclusive row, therefore, RS in the innerText attribute of IE no longer exclusive to a row, but is connected with other characters. In FF, because textContent ignores labels, CSS is ignored, therefore, the value of its textContent attribute does not change.

In this case, many cloud clouds that say "allow FF to support the innerText attribute" on the Internet are more or less problematic. To Implement IE's innerText, it is far less simple than imagined. To use JavaScript to make FF have the same effect as innerText, You have to parse all html tag attributes, to explain them, you even need to explain css ......
(However, according to the principle, it seems that the innerText effect can be simulated in FF by copying and retrieving the clipboard (this is not tested), but 1 has side effects, the clipboard operation under 2FF is also very troublesome .)

But fortunately, most of the time we do not need to be so precise, using innerHTML for some simple processing can achieve relatively close results.

Note: The above code is tested in IE6 and FF3.