Trying to set text in a td through dom

[Bill M.]

Hello,

What's up with this?

I've got a <td id="container"> and want to set the text in this cell like
....

var container = document.getElementById('container');
container.data = "Data in cell";

but can only seem to do it like this ...

var label = document.createTextNode("Data in cell");
container.appendChild(label);

which seems to actually leave me with two text nodes.


Thanks,

Bill

 

[Bill M.]

Ok ... It appears that you need *something* to start with between the <td>
and the </td>

So I have ...

<td id=container>&nbsp;</td>

then I can do ..

var container = document.getElementById('container');
container.data = "Data in cell";

But this is strange because there should exist a text node (CharacterData)
for every element, even if there is no text; at least as I understand the
model.

 

[Lasse Reichstein Nielsen]

[topposting fixed]
If the td has a text node inside it, you can use
container.firstChild.nodeValue = "Data in cell";

That works too.

It does. You can remove the existing text node first:
container.removeChild(container.firstChild);

Ok ... It appears that you need *something* to start with between the <td>
and the </td>

So I have ...

<td id=container>&nbsp;</td>

then I can do ..

var container = document.getElementById('container');
container.data = "Data in cell";

Does it work? I didn't think the td element had a "data" property.
However,
container.firstChild.data = "Data in cell";
would work (equivalent to .nodeValue).

But this is strange because there should exist a text node (CharacterData)
for every element, even if there is no text; at least as I understand the
model.

I don't think so. Every CharacterData has a "data" property, but the td
*Element* is not a CharacterData.
The inheritance hierarchy is:
+------+
|/Node/|
+------+
/ \
+-------+ +---------------+
|Element| |/CharacterData/|
+-------+ +---------------+
\
+----+
|Text|
+----+

The td element is an Element. Its first child node is a Text.

You try to set the "data" property of something that is not a
CharacterData. That just creates a new property, but otherwise
does nothing.

/L

 

[Bill M.]

[snip]

Does it work? I didn't think the td element had a "data" property.
However,
container.firstChild.data = "Data in cell";
would work (equivalent to .nodeValue).

Sorry my BAD; I left out the firstChild. However, this still appears not to
work unless there is some text already there.

I don't think so. Every CharacterData has a "data" property, but the td
*Element* is not a CharacterData.
The inheritance hierarchy is:
+------+
|/Node/|
+------+
/ \
+-------+ +---------------+
|Element| |/CharacterData/|
+-------+ +---------------+
\
+----+
|Text|
+----+

The td element is an Element. Its first child node is a Text.

You try to set the "data" property of something that is not a
CharacterData. That just creates a new property, but otherwise
does nothing.

Ok. I see. I'm getting messed up by peering too deeply into my Mozilla DOM
Inspector. Every Element appears as a Node with a text child node whether or
not the text is there.

Why DOM Inspector is showing text nodes when they're not initialized I'm not
sure. I think they must be there in some state anyway. The odd thing is how
this 'sleeping' textnode appears to go unused when you append a text node.
That is, DOM Inspector will show 2 text nodes (that could be normalized I
guess) after appending a text node to a <td> element.

cheers,

Bill