getElementById returns [object HTMLFontElement]

[BungeeJumper]

I'm a newbie at javascript, and am attempting to replace a series of value on a list. I've been getting varous errors and have worked through quite a few. Now I am not getting errors in the error console but it looks like getElementById is returning an object when document.writeln returns this --- [object HTMLSpanElement]

I have all the items in the list id'd in this manner.<small>(<span id="'.$id[$i].'">'.$npopulation[$time_period_adjust].'</span>)</small>

producing source code like this
<small>(<span id="69">7</span>)</small>

Here is my code

<script type="text/javascript">
document.write("Hello World!");

myArray = new Array(15,89,4,61,5)
catArray = new Array(60,65,69,2719)
document.writeln(myArray);
document.writeln(catArray);

var oFullParent = document.getElementById("69");
document.writeln(oFullParent);
</script>

I've simplified it as much as I can, down to getting just one element of the list but I can't get it do do even the one.I tried putting the id in a font tag instead of the span tag and get [object HTMLFontElement].

Any help will be greatly appreciated

[edited by: eelixduppy at 12:50 am (utc) on Aug. 6, 2009]
[edit reason] disabled smileys [/edit]

[eelixduppy]

Hello and Welcome to WebmasterWorld!

Instead, try something like this:

document.writeln(oFullParent.firstChild.nodeValue); 

oFullParent is an object that cannot just be printed to the browser. Here you can see I'm grabbing the value of the first child of that element (which is text).

[BungeeJumper]

AWESOME! Broke a major log jam for me. Thanks!

[eelixduppy]

Cool glad everything works. Also, for something simple like this, you could also use the innerHTML property, although I tend to try to stay away from that when I can as a matter of preference, but that would look something like the following:

document.writeln(oFullParent.innerHTML);

[BungeeJumper]

What's the difference between the two or why the concern about innerHTML? This is all new to me

[eelixduppy]

They have different behavior. When you use the DOM properties you know exactly (or should) what you are going to be getting. innerHTML grabs everything. For example if we have a DIV defined as follows...

<div id="main"><p>One</p><p>Two</p></div>

And we parse code as follows:

var main = document.getElementById('main');

alert(main.innerHTML);
alert(main.firstChild.firstChild.nodeValue);

The first line there will alert the message: "<p>One</p><p>Two</p>"
The second line there will alert the message: "One"

So to conclude, innerHTML will be grabbing everything in that elements body, which sometimes you may not want. If that were the case and you used innerHTML, you'd then have to get rid of the excess HTML through a series of string manipulations which wouldn't be fun. So to get around this, we traverse the DOM. :)

[BungeeJumper]

I'll take your advice and try to avoid it. Thank you.