Problem dynamically writing HTML

E

ezmiller

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...
 
V

VK

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

Jis Almighty! :-O

document.title = "What I want";

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

ezmiller

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.
 
T

Tony

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

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.
 
V

VK

ezmiller said:
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.

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 ;-)
 
E

ezmiller

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....
 
T

Thomas 'PointedEars' Lahn

VK said:
ezmiller said:
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.

OK, for better understanding you can also try:
[...]
2) appendChild <div> to <p> or appendChild <p> to <div>

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;">
|
| [...]
| said:
[...]
5) Do not trust anyone (including myself) and any docs unless it indeed
works as explained ;-)

Q.e.d.? ;-)


PointedEars
 
T

Thomas 'PointedEars' Lahn

ezmiller said:
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....

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top