The difference between InnerHTML outerhtml innertext textcontent __html

Read a lot of blog on the Internet to introduce the difference between them, most of them said that FF innertext can not be used, but after their own experiments, is available, so they summed up a variety of situations.

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

Give two chestnuts, contrast 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 ID main, and as shown above, you can see that the spaces between the labels are also exported.

<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.

So what is outerHTML? It actually contains the target tag, and that's the result.

Well, here's the difference between innertext and textcontent. InnerText (compatible with all browsers here FF and Chrome are all 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 innertext, you can see that the contents of the window and console output is basically the same, the space between the label is also output.

There is a difference between browsers, however, and the first p tag in Chrome is less than a blank line above Firefox.

Ie9ie8

The output in the IE9 is the same as in FF, and the IE8 and the following version only have the effect of wrapping, and you'll get drunk when you see it. textcontent (IE8 and below cannot be used with the latest FF and Chrome)

Textcontent relative to the innertext will be much simpler, it does not consider the relationship between the label, compared to the pure output text, it is only the text between the code in the output of the space.

It's 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 is no difference between browsers. Only IE version issues need to be considered.