When we want to fetch text from a page, we sometimes use any of the innerHTML, innerText, textContent, or Value methods to fetch the same value. This gives the user the illusion that they are all the same. But is this really the case?

So what are innerHTML, innerText, textContent, and value

1.innerHTML

The element. innerHTML attribute sets or gets the descendant of the Element represented by the HTML syntax. InnerHTML takes all the contents of the page from the beginning of the HTML tag to the end of the tag, including the HTML tag of the descendant element and the content in it. It does not take effect in the HTML tag from the end or in the pseudo-element (e.g. <img/>). And escapes &, <, > to &amp; , &lt; And > assignments with innerHTML empty all the contents of the selected tag before the assignmentCopy the code

Now, if we’re going to take the value of the current div because we’re going to escape that particular text then innerHTML isn’t really the right thing to do.

2.innerText

InnerText was first introduced by Internet Explorer and officially became an HTML standard in 2016. InnerText takes the content of an HTML tag on a page, but it doesn't take the content of script and style tags. The rendered result can be thought of as the rendered text on the page. The innerText gets what the rendered text looks like. Some CSS styles are affected in IE9 below, such as floatCopy the code

3.textContent

TextContent and innerText seem to be the most similar when used, but they have many differences. 1. TextContent takes the contents of all elements, including <script> and <style> elements, and fully restores the text within the HTML tag with Spaces and newlines, whereas the innerText does not. 2. InnerText is influenced by CSS styles and does not return the text of the hidden element, whereas textContent does. 3. The innerText is affected by CSS styles, which trigger reflow, but the textContent is not. Modifying the innerText in Internet Explorer (IE11 or less) not only removes the child nodes of the current element, but also permanently destroys all descendant text nodes (so it is impossible to insert the node again into any other element or into the same element)Copy the code

4.value

Now that you’ve solved the innerHTML, innerText, and textContent, all of these relationships and actions are non-form elements, we’ll look at the value attribute of a form element in more detail

Textarea: FireFox: innerHTML: Input [type='text'] An assignment via innerHTML affects the value of the textContent, before the value is assigned, and after the value is assigned, the value has nothing to do with innerHTML. TextContent: Assigning a value to a textContent affects the innerHTML value, and affects the value before the value is assigned. After the value is assigned, the value has nothing to do with the textContent. value: Chrome: innerHTML, innerText, and textContent all assignments before a value is assigned affect the value that contains the value. Ie6-11: InnerHTML, innerText, textContent, and Value all affect each other. Input [type='text'] : FireFox: innerHTML: An assignment via innerHTML affects the value of the textContent, before the value is assigned, and after the value is assigned, the value has nothing to do with innerHTML. TextContent: Assigning a value to a textContent affects the innerHTML value, and affects the value before the value is assigned. After the value is assigned, the value has nothing to do with the textContent. Value: takes effect after the value is assigned. Chrome: InnerHTML: The innerHTML can be set but it doesn't work, but it affects the value of the textContent. TextContent: The innerHTML can be set but it doesn't work, it always affects the value of the value. InnerHTML: Value: Value can be set and valid, and does not affect the value of other methods. IE6~8: innerHTML: Indicates an error when setting textContent: InnerText: The innerText can be set but is invalid, which will always affect the value of the value. Value: The value can be set and is valid, which does not affect the value of other methods. InnerHTML: The innerHTML can be set and valid, which affects the value of the textContent and innerText. TextContent: The textContent can be set but invalid, which always affects the value of the innerText: InnerText can be set but invalid, which always affects the value value. Value: Value can be set and valid, which does not affect the value of other methodsCopy the code