DOM: Difference Between textContent, innerHTML, innerText, nodeValue

By Xah Lee. Date: . Last updated: .

What's the difference between the properties textContent, innerHTML, innerText, nodeValue?

innerHTML

ele.innerHTML is the most useful, and supported by all browsers back to 2010. innerHTML can be text content or HTML source code.

// innerHTML can be used to insert plain text content or HTML
// this creates a list inside a div element

const ele = document .getElementsByTagName("div");

ele[0].innerHTML =  `<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>`;

nodeValue

nodeValue is for setting content of text node only.

[see DOM: Node Type, Node Name, Node Value]

nodeValue is particular useful when working with XML, such as SVG.

[see Practical SVG Tutorial]

The most compatible and standard way of setting text content is first to get the element's content as a text node, then set nodeValue, like this:

node.firstChild.nodeValue = text

But, if a element's content is empty, it doesn't have any child (thus no text node), so you need to check if element has firstChild first.

// the most compatible way to change a element's text content.

const addTextNode = ((ele, text) => {
    if ( ele.firstChild ) {
        ele.firstChild.nodeValue = text;
    } else {
        ele.appendChild(document .createTextNode(text));
    }
});

const myEle = document .getElementsByTagName("p")[0];

const newText = "hi";

addTextNode( myEle, newText );

textContent

ele.textContent is in standard's spec around 2011, and is supported by browsers since about 2013. textContent's value is meant to be text only, not HTML. It is not style aware.

// change text content of first p tag
document .getElementsByTagName("p")[0].textContent = "I <b>love</b> JS";
// the bolded text won't be rendered in bold. Firefox, Chrome 2015-03

innerText

ele.innerText is from Internet Explorer. It's not supported by Firefox as of 2015-03-13.

Web Scripting Overview

  1. Browser Window Object, DOM
  2. Intro to Event-Based Programing
  3. JavaScript Load Order

DOM How-To

  1. Basic DOM Methods
  2. Get Element by ID, Tag, Name, Class, CSS
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Attribute Value
  8. Set Attribute Value
  9. Remove Attribute
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree
  13. Node Type, Name, Value

HTML Input

  1. Button
  2. Text Field
  3. Password Field
  4. Textarea
  5. Email πŸ“§
  6. Number Field
  7. Radio Button πŸ”˜
  8. Checkbox πŸ—Ή
  9. Popup Menu β–€
  10. Slider 🎚
  11. Color Picker 🌈

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. How to Create Tooltip
  9. Falling Snow Effect
  10. Box Following Scroll

Web Scripting Misc

  1. Web Cookies
  2. Web Storage
  3. DOM: Open URL window.open
  4. Encode URL, Escape String
  5. Browser Info, Navigator Object
  6. Get URL (window.location)
  7. Find Window Width
  8. Find Element Width
  9. WebSocket
  10. Value of β€œthis” in Event Handler
  11. Event Delegation
  12. Get Current Script Tag
  13. insertAfter Element
  14. Randomize List
  15. create Document Fragment
  16. innerHTML, nodeValue, textContent, innerText?
  17. What is Live Object
  18. NodeList vs HTMLCollection
  19. Whitespace Nodes

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog