[javascript] Difference between innerText, innerHTML and value?

What is the difference between innerHTML, innerText and value in JavaScript?

The only difference between innerText and innerHTML is that innerText insert string as it is into the element, while innerHTML run it as html content.

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';_x000D_
document.getElementById('innertext').innerText = ourstring;_x000D_
document.getElementById('innerhtml').innerHTML = ourstring;

.name{_x000D_
color:red;_x000D_
}

<h3>Inner text below. It inject string as it is into the element.</h3>_x000D_
<div id="innertext"></div>_x000D_
<br />_x000D_
<h3>Inner html below. It renders the string into the element and treat as part of html document.</h3>_x000D_
<div id="innerhtml"></div>

In simple words:

1. innerText will show the value as is and ignores any HTML formatting which may be included.
2. innerHTML will show the value and apply any HTML formatting.

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.

InnerText property html-encodes the content, turning <p> to <p>, etc. If you want to insert HTML tags you need to use InnerHTML.

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, inner HTML lets you work with HTML rich text and doesn’t automatically encode and decode text.

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');_x000D_
element.innerText = '<strong> hello world </strong>';_x000D_
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);_x000D_
_x000D_
console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);_x000D_
element.innerHTML = '<strong> hello world </strong>';_x000D_
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);_x000D_
console.log(element.innerHTML);

<p id="hello"> Hello world _x000D_
</p>

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);

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.

to add to the list, innerText will keep your text-transform, innerHTML wont

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

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. Note it's a property of Element objects.

node.innerText

Sets or gets the text between the start and end tags of the object

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 applies text-transform and white-space rules
  • innerText trims white space between lines and adds line breaks between items
  • innerText will not return text for invisible items
• innerText will return textContent 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.

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

While this is a W3C standard, 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, 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:

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'];_x000D_
_x000D_
// Writes to textarea#output and console_x000D_
function log(obj) {_x000D_
  console.log(obj);_x000D_
  var currValue = document.getElementById('output').value;_x000D_
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; _x000D_
}_x000D_
_x000D_
// Logs property as [propName]value[/propertyName]_x000D_
function logProperty(obj, property) {_x000D_
  var value = obj[property];_x000D_
  log('[' + property + ']'  +  value + '[/' + property + ']');_x000D_
}_x000D_
_x000D_
// Main_x000D_
log('=============== ' + properties.join(' ') + ' ===============');_x000D_
for (var i = 0; i < properties.length; i++) {_x000D_
  logProperty(document.getElementById('test'), properties[i]);_x000D_
}

<div id="test">_x000D_
  Warning: This element contains <code>code</code> and <strong>strong language</strong>._x000D_
</div>_x000D_
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>