The difference between InnerHTML outerhtml InnerText textcontent

Read a lot of blog on the Internet to introduce the difference between them, most of the innertext can not be used in the FF, but after their own experiment, it can be used, so he summed up a variety of situations.

The first is innerHTML, this is not much to say, return is the label inside all the content, including tags and text, as well as spaces

Give two chestnuts, compare the output difference caused by the space

<div id= "main" >1<span>123</span><p>222</p><div class= "test" >456</div> </div>

This removes the innerHTML in the tag with the ID main and, as a result, you can see that the spaces between the labels are also output.

<div id= "main" >1<span>123</span><p>222</p><div class= "test" >456</div> </div>

If the code is like this, the result is the bottom line.

So what is outerHTML? It actually contains the target tag, and the result is this.

OK, here's the difference between innertext and textcontent.

InnerText (compatible with all browsers here FF and Chrome are up to date)

<div id= "main" >1<div>123</div><p>222</p><p class= "test" >456</p>< span>123</span>    <span>222</span>            <span class= "test" >456</span></div >

Browser: Firefox browser: Chrome

On the left is the page display, the right is the console output of the innertext, you can see that the contents of the window and console output is basically the same, the space between the labels is also output.

But there's a difference between browsers, and Chrome has a blank line in the top of the first p tag compared to Firefox.

Ie9ie8

IE9 in the output and FF is the same, and IE8 and the following version only the effect of the line, see here is drunk.

Textcontent (IE8 and below are not available with the latest FF and Chrome)

Textcontent relative innertext is a lot simpler, it does not take into account the relationship between the labels, compared to the pure output text, it just to the text in the code between the space to output.

Or the same code?

<div id= "main" >1<div>123</div><p>222</p><p class= "test" >456</p>< span>123</span>  <span>222</span>           <span class= "test" >456</span></div >

Ff:

Chrome:

IE9 and above:

For Textcontent, there's no difference between browsers. Just the version of IE issue needs to be considered.

The difference between InnerHTML outerhtml InnerText textcontent