Difference between innerText innerHTML and value

Question

What is the difference between innerHTML  innerText and value in JavaScript

User · Answer

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:

_x000D_

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_
}

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

_x000D_

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The innerText property returns the actual text value of an html element while the innerHTML returns the HTML content  Example below    x000D   x000D  var element   document getElementById  hello    x000D  element innerText     lt strong gt  hello world  lt  strong gt    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     lt strong gt  hello world  lt  strong gt    x000D  console log  The  lt strong gt  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   x000D   lt p id  hello  gt  Hello world  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

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

User · Answer

InnerText property html-encodes the content  turning  lt p gt  to  amp lt p amp gt   etc  If you want to insert HTML tags you need to use InnerHTML

User · Answer

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    x000D   x000D  const ourstring    My name is  lt b class  name  gt Satish chandra Gupta lt  b gt     x000D  document getElementById  innertext   innerText   ourstring  x000D  document getElementById  innerhtml   innerHTML   ourstring  x000D   name  x000D  color red  x000D    x000D   lt h3 gt Inner text below  It inject string as it is into the element  lt  h3 gt  x000D   lt div id  innertext  gt  lt  div gt  x000D   lt br   gt  x000D   lt h3 gt Inner html below  It renders the string into the element and treat as part of html document  lt  h3 gt  x000D   lt div id  innerhtml  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

In simple words    innerText will show the value as is and ignores any HTML formatting which may  be included  innerHTML will show the value and apply any HTML formatting

[javascript] Difference between innerText, innerHTML and value?

`element.innerHTML`

`node.innerText`

`node.textContent`

`node.value`

Sample Script

Examples related to javascript

Examples related to dom