A simple DOM question about textNodes.

[Daz]

Hi everyone.

I am trying to figure out if it's possible to dynamically change the
value of a textNode.

I seem to remember experiementing before I implemented them into my
page, and I was able to do so. However, I can't seem to get it to work
now, and I am considering going back to using <span> elements, and
innerHTML to change the value.

Here's some code:
//********** CODE START **********

function example(someText)
{
this.obj;

var titleText = document.createtextNode(someText);
var td = document.createElement('td');
var tr = document.createElement('tr');
var tbody = document.createElement('tbody');
var table = document.createElement('table');

td.appendChild(titleText);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
this.obj = table;

this.changeText = function (newText)
{
titleText = newText;
}
}

var newObject = new example('Some Text').
var someElement = document.getElementById('idOfSomeElement');
someElement.appendChild(newObject.obj);
newObject.changeText = 'New Text';

//***********CODE END ***********

From what I can see, the textNode value remains the same. is innerHTML

the only way forward, or am I missing something here (as usual).

Many thanks.

Daz.

 

[Martin Honnen]

The method name is |createTextNode| not |createtextNode|.

 

[Daz]

The method name is |createTextNode| not |createtextNode|.

Hi Martin,

Thanks for the reply.

Sorry, that was a typo on my part. The code was not copied and pasted,
I hand coded it to give the general jist of what I am trying to do.
Well done for spotting it, though. I should point out that I am using
the Web Developer extension for Firefox, which points out any
JavaScript errors. When my code is ran, it doesn't display a single
warning or error.

I would guess from your reply that you too, see now reason why I can't
change the value of a textNode?

All the best.

Daz.

 

[Martin Honnen]

I would guess from your reply that you too, see now reason why I can't
change the value of a textNode?

If you have a text node object then you can change its content with e.g.
textNode.nodeValue = 'new content'
or
textNode.data = 'new content'

 

[Daz]

If you have a text node object then you can change its content with e.g.
textNode.nodeValue = 'new content'
or
textNode.data = 'new content'

This is really weird. textNode.data makes my page do what it's meant
to, but then somehow resets it. However, textNode.nodeValue works. I
tried it before, and it wasn't working. The Error Console said that the
textNode had no properties. I think it was an issue with my using the
'this' keyword in the wrong place. However all is well no, so many
thanks.

I just have one more question which is a little off topic, so I
understand it you don't answer. I'd just rather not start another post
unless I need to. Is there anyway to hook an onchange event handler to
a variable? So if the variable value changes, another event is fired?
onchange doesn't work.

Thanks for your help.

Daz.

 

[adamraney]

In Firefox, it seems you can change a text node by changing it's
textContent property. In your example, that would be:

titleText.textContent = newText;

I'm not sure if this works cross-browser however.

 

[Daz]

In Firefox, it seems you can change a text node by changing it's
textContent property. In your example, that would be:

titleText.textContent = newText;

I'm not sure if this works cross-browser however.

Thanks for that Adam. Wouldn't it be great if all browsers use the same
syntax and attributes?

nodeValue seems to work for Firefox. I would imagine it would work
cross platform too, but I can't be sure as I am still trying to get my
head around it.

Many thanks.

Daz.