Difference between innerText, innerHTML and value?

by

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'];

// 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>

Leave a Comment

tech