By user2819851

2013-09-26 14:16:05 8 Comments

What is the difference between innerHTML, innerText and childNodes[].value in JavaScript?


@NickAth 2019-04-06 16:10:40

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);
<p id="hello"> Hello world 

@scrblnrd3 2013-09-26 14:23:10

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.

@Balkishan 2017-11-22 04:55:53

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.

@Nikos 2017-04-08 11:10:56

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.

@guymid 2013-09-26 14:20:46

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

@jor 2016-07-18 07:58:22

Just for clearity: This only applies when SETTING a value. When you're GETTING the value HTML tags are simply stripped and you get the plain text.

@alejo802 2013-09-26 14:20:59

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.

@Heitor 2017-08-07 07:56:39

Very important to paste here in the accepted answer @jor's comment below in another answer: "Just for clearity: This only applies when SETTING a value. When you're GETTING the value HTML tags are simply stripped and you get the plain text."

@fny 2013-09-26 15:11:11

The examples below refer to the following HTML snippet:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.

The node will be referenced by the following JavaScript:

var x = document.getElementById('test');


Sets or gets the HTML syntax describing the element's descendants

// => "
// =>   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.


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

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


Gets or sets the text content of a node and its descendants.

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


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" />
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"

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) {
  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>.
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

@Jarno Lamberg 2014-10-06 15:00:01

Even the most recent versions of Firefox do not support innerText: and

@Luke Hutchison 2015-06-30 00:09:12

It would be helpful to have each of the four properties (innerHTML, innerText, textContent, value) divided into two subheadings: "get" behavior and "set" behavior.

@Ben Nieting 2016-10-18 16:52:16

I find getting innerText useful for GUI automation, so you can assert the text the user sees.

@Kilmazing 2017-01-04 17:45:07

According to Firefox >=45 is supported.

@domsson 2017-06-28 10:04:04

If I understand the MDN correctly, innerText is now part of the Standard and should be supported by Firefox from version 45 on; maybe reason for an update to this great answer @faraz

@SarcasticSully 2018-01-10 16:08:50

It also converts &lt; to <, &gt; to >, etc.

@kaushik0033 2013-09-26 14:27:17

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

Related Questions

Sponsored Content

49 Answered Questions

52 Answered Questions

[SOLVED] Create GUID / UUID in JavaScript?

  • 2008-09-19 20:01:00
  • Jason Cohen
  • 1697840 View
  • 3970 Score
  • 52 Answer
  • Tags:   javascript guid uuid

33 Answered Questions

[SOLVED] What's the difference between using "let" and "var"?

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

68 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

2 Answered Questions

21 Answered Questions

[SOLVED] What is the difference between call and apply?

38 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

8 Answered Questions

[SOLVED] What is the difference between Bower and npm?

  • 2013-09-05 16:53:19
  • Games Brainiac
  • 311292 View
  • 1742 Score
  • 8 Answer
  • Tags:   javascript npm bower

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

Sponsored Content