HTML Javascript get textNode by id tagname anything?

Question

Is there anyway to assign an id to a textNode and then retrieve that text node via that id? I've tried several different ways and keep getting errors saying cannot get property of null.

My code looks something like this...

 var myDiv = document.createdElement('div');
 myDiv.id = "textContainer";

 var textNode = document.createdTextNode("some text");
 textNode.id = "descriptionText";
 myDiv.appendChild(textNode);

Works fine to this point; it displays on the page. Later I try to modify that text node and that's where I'm getting the errors.

 var tempNode = document.getElementById(descriptionText);
 descriptionText.value = "new text";

And it's a no go. I've tried variates like naming by text node with tagName, data, etc., and I'm getting the same error. So, is it not possible to name and retrieve a text node? And the next best solution to create new text nodes and replace the old text node?

Answer 1

Text doesn't have a property for id, so when you write the node into the DOM, it's not accessible that way any more. What you create in the JavaScript (a Text object) does not directly correlate to a DOM element like HTMLElement.

In fact, it's not even considered a child of the parent, it's the textContent of the parent. Note that textContent comes from an element inheriting from a Node.

You can assign an "id" to the object when you create it because all objects are just objects, but when you put it into the DOM, all non-standard stuff disappears.

If you test your parent element for it's children:

myDiv.children.length;

You'll see that (if there are no other children) the text node you've added is "absorbed" into the parent as a property.

Here's a little jsfiddle demonstrating.

---

Side note: this is an over-simplification of how text is handled in the browser. I don't know if I'd call it a gross over-simplification, but it is one either way.

It should be noted that Text inherits from CharacterData which in turn inherits from Node. However, these are interfaces, which limit the scope of available methods / properties.

Additionally, Text nodes are always accessible in the DOM, but not via identifiers or tags. The MDN page for Node.normalize clearly demonstrates how these nodes are available via the childNodes read-only nodeList.

While it is useful to keep this stuff in your back pocket, it's probably not important to think about Text in the context of Nodes and normalization and CharacterData for day to day use.