I was recently trying to find a better method of replacing text inside HTML elements. WD user Kor (and several others) has mentioned several times on this forum that "innerHTML" is not a DOM standard. We also know that textContent only works on FF and innerText only works on IE (this pays no attention to Chrome and Safari, since they do both). Nevertheless, we need to stay away from these if we want concise code that works cross browser, correct?
So, I knew I wanted to use textNodes to accomplish this. The best method for inserting things into the document to make sure it goes into the DOM tree as well is to use createElement and createTextNode, and manipulate them using their respective properties. I went and took a look at the textNode properties and methods to see what I could find.
It turns out that the TextNode object actually has 2 properties that give you their content: "nodeValue" and "data". I'm not quite sure exactly what the difference between the two is, but I'm sure there is one. They are both described exactly the same way in documentation.
For my purposes, I decided to stick with nodeValue. I figured I could do this one of 2 ways. Create and insert my own TextNode and manipulate it or declare an element object to hold an existing one. Since most of the time, we need to manipulate text that already exists, I'll stick to the first method. There may be cases like "<td></td>" where there is no TextNode and we need to make one though.
So how do we do this? Text nodes don't have id's or even tags... they're just text! If we know the only thing inside a container is text content, then this is easy... we just use Element.firstChild to refer to the only node inside it--a TextNode. But what if we have "<strong>" tags or "<span>" tags, etc? Or leading/trailing elements?
What's the best method for referring to TextNodes?
Nodes have another property: nodeType:
Using nodeType you may find not only the textNodes but even the comments, CDATA sections, etc.
About the difference between data and nodeValue: nodeValue is a more comprehensive property. It can refer the value of an node (any kind of node who might bear a value - for instance an attribute, but not only the native HTML attributes) as well (see DOM 2)
In fact we are dealing here with XML DOM applied on HTML/XHTML medium.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<div myproperty="some value"></div>