HTML Dom help.. What to use instead of innerHTML

[feudin]

I am reluctant to use 'innerHTML' to modify #textNodes as it is not a part of the W3C DOM specification. I am aware that it is supported by all major browsers. I am not here to discuss my reasoning for why I have decided this. I am simply here to go over an alternate method of reaching the desired result.

Here is my HTML code: HTML Code Here
Javascript code: Javascript Here

Now I have replaced the following code:

function test_function() {
say = 'You successfully entered text here using innerHTML'
document.getElementById('text_area').innerHTML = (say)
}

With the following code:

function test_function() {
say = 'You successfully entered text here using innerHTML'
document.getElementById('text_area').childNodes[0].nodeValue = (say)
}

As far as I'm aware, the paragraph with 'id="text_area" is the parent of the #textNode. I don't understand why the above code will not edit the #textNodes contents

I am new to web development so forgive me if i am missing something simple here.

Regards

[xelawho]

it would appear that, as your tags are closed up:

<p id="text_area"></p>

no node exists for that element. in other browsers you can fix this by adding just one space:

<p id="text_area"> </p>

but IE requires a non-breaking space for the text node to be created:

<p id="text_area">&nbsp</p>

that way, a node exists in the dom and a value can be set to it, the way you have it coded, with one small modification:

function test_function() {
say = 'You successfully entered text here using innerHTML'
document.getElementById('text_area').childNodes[0].nodeValue=say;
}

[feudin]

it would appear that, as your tags are closed up:

<p id="text_area"></p>

no node exists for that element. in other browsers you can fix this by adding just one space:

<p id="text_area"> </p>

but IE requires a non-breaking space for the text node to be created:

<p id="text_area">&nbsp</p>

that way, a node exists in the dom and a value can be set to it, the way you have it coded, with one small modification:

function test_function() {
say = 'You successfully entered text here using innerHTML'
document.getElementById('text_area').childNodes[0].nodeValue=say;
}

Thank you xelawho, this is exactly what I was looking for!.

Thanks to the other who took the time to help also.. nice forum, I will be using it more from now on

Regards

[nathanwall]

I very rarely ever use innerHTML, and then it's only to accomplish something that can't be done without other DOM methods. What you want is definitely doable.

function test_function() {
var say = 'You successfully entered text here *without* using innerHTML';
var newTextNode = document.createTextNode(say);
document.getElementById('text_area').appendChild(newTextNode);
}

joi JavaScript Framework provides some sugar for making changes to the DOM to make your life easier, and it uses these types of DOM methods behind the scenes (instead of innerHTML). So you could also consider using joi:

function test_function() {
var say = 'You successfully entered text here *without* using innerHTML';
joi.get('text_area').setText(say);
}

[xelawho]

the problem with creating and appending a new child is that every time that button is clicked it will create and append another. Which may be what you want. But if not, you can test to see if it exists - if it doesn't, create it. And if it does, change its value:

function test_function() {
say = 'You successfully entered text here *without* using innerHTML'
p=document.getElementById('text_area')
if(!p.firstChild){
p.appendChild(document.createTextNode(say));
}else {
p.firstChild.nodeValue=say;
	}
}

[Padonak]

wot zei a tolkin ebaut?!