Difference between innerText, innerHTML and value?
JavascriptDomInnerhtmlInnertextJavascript Problem Overview
What is the difference between innerHTML
, innerText
and value
in JavaScript?
Javascript Solutions
Solution 1 - Javascript
The examples below refer to the following HTML snippet:
<div id="test">
Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
The node will be referenced by the following JavaScript:
var x = document.getElementById('test');
element.innerHTML
[Sets or gets the HTML syntax describing the element's descendants][moz-innerHTML]
x.innerHTML
// => "
// => Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "
This is part of the W3C's [DOM Parsing and Serialization Specification][w3-innerHTML]. Note it's a property of Element
objects.
node.innerText
[Sets or gets the text between the start and end tags of the object][msft-innerText]
x.innerText
// => "Warning: This element contains code and strong language."
innerText
was introduced by Microsoft and was for a while unsupported by Firefox. In August of 2016,innerText
was adopted by the WHATWG and was added to Firefox in v45.innerText
gives you a style-aware, representation of the text that tries to match what's rendered in by the browser this means:innerText
appliestext-transform
andwhite-space
rulesinnerText
trims white space between lines and adds line breaks between itemsinnerText
will not return text for invisible items
innerText
will returntextContent
for elements that are never rendered like<style />
and `- Property of
Node
elements
node.textContent
[Gets or sets the text content of a node and its descendants.][moz-textContent]
x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
While this is a [W3C standard][w3-textContent], it is not supported by IE < 9.
- Is not aware of styling and will therefore return content hidden by CSS
- Does not trigger a reflow (therefore more performant)
- Property of
Node
elements
node.value
This one depends on the element that you've targeted. For the above example, x
returns an HTMLDivElement object, which does not have a value
property defined.
x.value // => null
Input tags (<input />
), for example, do [define a value
property][moz-HTMLInputElement], which refers to the "current value in the control".
<input id="example-input" type="text" value="default" />
<script>
document.getElementById('example-input').value //=> "default"
// User changes input to "something"
document.getElementById('example-input').value //=> "something"
</script>
From the [docs][moz-HTMLInputElement]:
> Note: for certain input types the returned value might not match the
> value the user has entered. For example, if the user enters a
> non-numeric value into an <input type="number">
, the returned value
> might be an empty string instead.
Sample Script
Here's an example which shows the output for the HTML presented above:
var properties = ['innerHTML', 'innerText', 'textContent', 'value'];
// Writes to textarea#output and console
function log(obj) {
console.log(obj);
var currValue = document.getElementById('output').value;
document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj;
}
// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
var value = obj[property];
log('[' + property + ']' + value + '[/' + property + ']');
}
// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
logProperty(document.getElementById('test'), properties[i]);
}
<div id="test">
Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>
[msft-innerText]: http://msdn.microsoft.com/en-us/library/ie/ms533899(v=vs.85).aspx "innerText property" [moz-textContent]: https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent "element.textContent" [moz-innerHTML]: https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML "element.innerHTML" [moz-HTMLInputElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement "HTMLInputElement" [w3-innerHTML]: http://www.w3.org/TR/DOM-Parsing/#widl-Element-innerHTML "innerHTML of type DOMString" [w3-textContent]: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent "textContent of type DOMString"
Solution 2 - Javascript
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.
Solution 3 - Javascript
InnerText
property html-encodes the content, turning <p>
to <p>
, etc. If you want to insert HTML tags you need to use InnerHTML
.
Solution 4 - Javascript
In simple words:
innerText
will show the value as is and ignores anyHTML
formatting which may be included.innerHTML
will show the value and apply anyHTML
formatting.
Solution 5 - Javascript
Both innerText
and innerHTML
return internal part of an HTML element.
The only difference between innerText
and innerHTML
is that: innerText
return HTML element (entire code) as a string and display HTML element on the screen (as HTML code), while innerHTML
return only text content of the HTML element.
Look at the example below to understand better. Run the code below.
const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;
.name {
color:red;
}
<p><b>Inner text below. It inject string as it is into the element.</b></p>
<p id="innertext"></p>
<br>
<p><b>Inner html below. It renders the string into the element and treat as part of html document.</b></p>
<p id="innerhtml"></p>
Solution 6 - Javascript
var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);
To further refine it and retrieve the value Alec for example, use another .childNodes[1]
var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);
Solution 7 - Javascript
In terms of MutationObservers
, setting innerHTML
generates a childList
mutation due to the browsers removing the node and then adding a new node with the value of innerHTML
.
If you set innerText
, a characterData
mutation is generated.
Solution 8 - Javascript
innerText
property sets or returns the text content as plain text of the specified node, and all its descendants, whereas the innerHTML
property gets and sets the plain text or HTML contents in the elements. Unlike innerText
, innerHTML
lets you work with HTML rich text and doesn’t automatically encode and decode text.
Solution 9 - Javascript
InnerText
will only return the text value of the page with each element on a newline in plain text, while innerHTML
will return the HTML content of everything inside the body
tag, and childNodes
will return a list of nodes, as the name suggests.
Solution 10 - Javascript
The innerText
property returns the actual text value of an html element while the innerHTML
returns the HTML content
. Example below:
var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);
console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);
<p id="hello"> Hello world
</p>
Solution 11 - Javascript
To add to the list, innerText
will keep your text-transform
, innerHTML
wont.
Solution 12 - Javascript
innerhtml will apply html codes
innertext will put content as text so if you have html tags it will show as text only