Difference between innerText, innerHTML and value?
Unlike innerText
, though, innerHTML
lets you work with HTML rich text and doesn't automatically encode and decode text. In other words, innerText
retrieves and sets the content of the tag as plain text, whereas innerHTML
retrieves and sets the content in HTML format.
innerText vs innerHTML vs label vs text vs textContent vs outerText
From MDN:
Internet Explorer introduced element.innerText. The intention is pretty much the same [as textContent] with a couple of differences:
Note that while textContent gets the content of all elements, including
<script>
and<style>
elements, the mostly equivalent IE-specific property, innerText, does not.innerText is also aware of style and will not return the text of hidden elements, whereas textContent will.
As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.
So innerText
will not include text that is hidden by CSS, but textContent
will.
innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an XSS attack vector.
In case you missed that, let me repeat it more clearly: Do not use .innerHTML
unless you specifically intend to insert HTML within an element and have taken the necessary precautions to ensure that the HTML you are inserting cannot contain malicious content. If you only want to insert text, use .textContent
or if you need to support IE8 and earlier, use feature detection to switch off between .textContent
and .innerText
.
A main reason that there are so many different properties is that different browsers originally had different names for these properties, and there still isn't complete cross-browser support for all of them. If you are using jQuery, you should stick to .text()
since that is designed to smooth out cross-browser differences.*
For some of the others: outerHTML
is basically the same as innerHTML
, except that it includes the start and end tags of the element it belongs to. I can't seem to find much description of outerText
at all. I think that is probably an obscure legacy property and should be avoided.
Difference between InnerHTML and InnerText property of ASP.Net controls?
InnerHtml
lets you enter HTML code directly, InnerText
formats everything you put in there for it to be taken as plain text.
For example, if you were to enter this in both properties: Hello <b>world</b>
This is what you would get with InnerHTML:
Hello world
That is, exactly the same HTML you entered.
Instead, if you use InnerText
, you get this:
Hello <b>world</b>
And the resulting HTML would be Hello <b>world</b>
When do I use .val() vs .innerHTML?
.val()
is used to get/replace input elements values in jQuery, alternative in JS is .value
.
innerHTML
or jQuery's .html()
is used to get/replace the whole markup inside an element, not input elements.
text()
is used almost the same as JS innertHTML
, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText
Reference links about innerHTML, innerText, val(), text(), html()
Setting innerHTML vs. setting value with Javascript
Setting the value
is normally used for input/form elements. innerHTML
is normally used for div, span, td and similar elements.
Here is a link showing the use of ID.value:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
nodeValue vs innerHTML and textContent. How to choose?
Differences between textContent/innerText/innerHTML on MDN.
And a Stackoverflow answer about innerText/nodeValue.
Summary
- innerHTML parses content as HTML, so it takes longer.
- nodeValue uses straight text, does not parse HTML, and is faster.
- textContent uses straight text, does not parse HTML, and is faster.
- innerText Takes styles into consideration. It won't get hidden text for instance.
innerText
didn't exist in firefox until FireFox 45 according to caniuse but is now supported in all major browsers.
Related Topics
How to Get the Coordinates of a Mouse Click on a Canvas Element
Pad a Number With Leading Zeros in JavaScript
How to Pass Parameters Rendered from Backend to Angular2 Bootstrap Method
Creating Object With Dynamic Keys
Console.Log() Shows the Changed Value of a Variable Before the Value Actually Changes
No Visible Cause For "Unexpected Token Illegal"
Group Array of Object Nesting Some of the Keys With Specific Names
How to Connect to SQL Server Database from JavaScript in the Browser
Google Seo and Hidden Elements
Changing Background Based on Time of Day (Using JavaScript)
Polymer Share Styles Across Elements
Serving Gzipped CSS and JavaScript from Amazon Cloudfront via S3
Screen Styling When Virtual Keyboard Is Active
Can You Have a JavaScript Hook Trigger After a Dom Element's Style Object Changes