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
That is, everything from the start position of the object to the ending position, including the HTML tag.
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.