Question

I’ve been using innerHTML and innerText for a while to change elements and text on web pages and I’ve just discovered that they are not W3C standard.

I’ve now found that innerHTML can be replaced with createElement, setAttribute and a few others but what is the best method for changing text inside an element?

I found a textContent as well but is there a standard way and is it widly implemented across older browsers?

Answer 1

textContent isn’t implemented in IE8 and lower. You can use createTextNode() similar to how you would use createElement(). However, I often use discovery techniques to find out which property I need to use and keep a reference to it:

// You can use a shorter variable name if you want
var innerTextOrTextContent = "textContent" in document.body 
                               ? "textContent" : "innerText";

// Set an element's text:
myElement[innerTextOrTextContent] = "Added using: "+innerTextOrTextContent;

The createTextNode() example:

var tNode = document.createTextNode("Added using createTextNode()");
myElement.appendChild(tNode);

Something I often forget about, you can also directly set a text node’s value, if you can get a reference to it:

// childNodes[0] is a text node:
myElement.childNodes[0].nodeValue = "Added using nodeValue";

Example – http://jsfiddle.net/BxPaG/.