The difference between innerHTML and innertext in Javascript, and innerHTML and innertext compatibility issues in various versions of browsers __javascript

1. In JavaScript, first let's see that innerHTML and innertext can be used to get the contents of a DOM element.

We can write this:

(1) When using innertext

In JS we,

The results obtained are as follows:

(2) when using innerHTML

Run this code and we can get

From this point of view, if you want to get a text node in the middle of a single DOM element, innertext and innerHTML

The results are the same, so what are the differences between them?

The difference between 2.innerHTML and innertext

If, as we write, when the DOM elements contain other DOM nodes, we give a simple particle

At this point, when we use innerHTML to get the contents of the ID div-1 element, we get a yes.

If you use innertext, you get the following:

We found that if you use innerHTML, you get all the nodes contained within the root element Div,

So get the content for <div>my Csdn</div>hello World, when we use innertext, we get only the text node, the resulting content does not include the DOM node, the resulting content is plain text, my csdn Hello World

3. Summary

(1) InnerHTML:

That is, everything from the start position of the object to the ending position, including the HTML tag.

(2) InnerText:

The content from the start position to the ending position, but it removes the HTML tag

4.innerHTML and innertext compatibility issues in different versions

When testing the compatibility of innerHTML and innertext, I found

InnerText tags are not compatible with fire Fox browsers, but compatible with the exception of the FF browser, IE8 above, almost

Supports all browsers.

So we use the process, try to avoid using innertext ....

5.innerHTML and value

For Textarea,text,password,button and other form elements, we can't use innerHTML to get the text content inside the form element,

For example, <button id= "btn-1" > Submit </button>

You can't use btn1.innerhtml to get the value of a switch, and if we want to get the text information for the form element

The btn1.value!! is used.