Problem dynamically writing HTML

I am trying to learn to write code dynamcially using javascript and the
W3C DOM. Does anybody know why this code mihgt be giving me trouble?

document.getElementsByTagName("head")[0].appendChild(document.createElement("title"));
alert(document.getElementsByTagName("title")[0].tagName);
document.getElementsByTagName("title")[0].appendChild(document.createTextNode("test"));

I get an error on the 3rd line: "Unexpected call to methor or property
access." I can't see why it's unexpected...

ezmiller wrote:[color=blue]
> document.getElementsByTagName("head")[0].appendChild(document.createElement("title"));
> alert(document.getElementsByTagName("title")[0].tagName);
> document.getElementsByTagName("title")[0].appendChild(document.createTextNode("test"));[/color]

Jis Almighty! :-O

document.title = "What I want";

// If you read DOM too much it makes damage - I have my proofs
// (not meaning you!) :-)

Ok, but this is an exercise. I'm trying to learn DOM. Theoretically, I
should be able to do it this way right? I'm hoping that if I can
figure out why this is not working, then I will understand the DOM
better.

>document.getElementsByTagName("title")[0].appendChild(document.createTextNo*de("test"));[color=blue]
>
>I get an error on the 3rd line: "Unexpected call to methor or property
>access." I can't see why it's unexpected...[/color]

I don't know for sure offhand, so you may want to research this - but I
don't believe <title> elements have an appendChild method. Therefore,
you are calling a method for the element that doesn't exist.

ezmiller wrote:[color=blue]
> Ok, but this is an exercise. I'm trying to learn DOM. Theoretically, I
> should be able to do it this way right? I'm hoping that if I can
> figure out why this is not working, then I will understand the DOM
> better.[/color]

OK, for better understanding you can also try:

1) create several table rows and add it to an existing table using
innerHTML

2) appendChild <div> to <p> or appendChild <p> to <div>

3) can give you more...

Somewhere it will work somewhere it doesn't. I guess W3C has some
answers at <http://www.w3.org> but I'm not going in there unless I'm
good paid or by brute force ;-).
My wild guess would be that TITLE (as the entire HEAD section) is not
considered to be included to the document text flow, so no textNode
allowed.

If you are learning (not hacking) DOM then on the primary stage you
should:

1) Do not go anywhere outside of document.body - that is your kingdom.

2) Always follow the natural relationship of elements (thus do not make
form to be a child of textfield).

3) Never append block elements (<p>, <div>) to inline elements (<span>,
<b>, <i>).

4) Remember that <table> is all special structure in comparison of
document.body so it is needed to be treated differently. W3C vs.
Microsoft is here:
<http://msdn.microsoft.com/workshop/author/tables/buildtables.asp>

5) Do not trust anyone (including myself) and any docs unless it indeed
works as explained ;-)

Now that seems like a plausible explanation, but the thing is that as I
understand it, every node should conform to the Node interface, and the
nodeInterface specifiies a appendChild function as well as a
removeChild function....

VK wrote:
[color=blue]
> ezmiller wrote:[color=green]
>> Ok, but this is an exercise. I'm trying to learn DOM. Theoretically, I
>> should be able to do it this way right? I'm hoping that if I can
>> figure out why this is not working, then I will understand the DOM
>> better.[/color]
>
> OK, for better understanding you can also try:
> [...]
> 2) appendChild <div> to <p> or appendChild <p> to <div>[/color]

Where the former SHOULD fail. `p' elements MUST NOT contain `div' or
other block-level elements.

,-<URL:http://www.w3.org/TR/html4/sgml/dtd.html>
|
| <!ENTITY % fontstyle
| "TT | I | B | BIG | SMALL">
|
| <!ENTITY % phrase "EM | STRONG | DFN | CODE |
| SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
|
| <!ENTITY % special
| "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
|
| <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
|
| <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special;
| | %formctrl;">
|
| [...]
| <!ELEMENT P - O (%inline;)* -- paragraph -->

However, `div' elements may contain `p' elements:

| <!ENTITY % block
| "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
| BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS
|
| <!ENTITY % flow "%block; | %inline;">
|
| [...]
| <!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
[color=blue]
> [...]
> 5) Do not trust anyone (including myself) and any docs unless it indeed
> works as explained ;-)[/color]

Q.e.d.? ;-)


PointedEars

ezmiller wrote:
[color=blue]
> Now that seems like a plausible explanation, but the thing is that as I
> understand it, every node should conform to the Node interface, and the
> nodeInterface specifiies a appendChild function as well as a
> removeChild function....[/color]

Just for clarification, the interface implementation tree we are talking
about is

Node (W3C DOM Level 2 Core)
|
'- Element (W3C DOM Level 2 Core)
|
'- HTMLElement (W3C DOM Level 2 HTML)
|
'- HTMLTitleElement (W3C DOM Level 2 HTML)

So you are right that HTMLTitleElement objects (i.e. objects implementing
that interface) should have an appendChild() method, and indeed they have
here (Firefox/1.0.7 on GNU/Linux).

However, that `title' element represented can have only and must have one
child text node, and that text node is already there, even if empty. Try

alert(document.getElementsByTagName("title")[0].childNodes.length);

in a Valid HTML 4.01 document with <title></title>. Should yield 1, and
if you try

alert(document.getElementsByTagName("title")[0].childNodes[0].nodeType);

it should yield 3 which equals the value of Node::TEXT_NODE.

Removing it would invalidate the underlying markup.

<URL:http://www.w3.org/TR/html4/struct/global.html#edef-TITLE>

Note that the #PCDATA content may be empty, but is AIUI _not_ optional.

Therefore the specified shortcut HTMLDocument::title, implemented as
document.title, exists to read and modify the value of that text node.

JFTR: In my UA,

document.getElementsByTagName("title")[0].nodeValue = "blurb";

does work (`nodeValue' value is changed, no error or exception), but does
not change the title of the window/tab. document.title="blurb" changes the
title of the window/tab, but does not change the nodeValue. I assume this
peculiarity is due to history when document.title was already part of DOM
Level 0.


PointedEars