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

Source: Internet
Author: User


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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.