Problem dynamically writing HTML

Discussion in 'Javascript' started by ezmiller, Dec 6, 2005.

  1. ezmiller

    ezmiller Guest

    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, Dec 6, 2005
    #1
    1. Advertising

  2. ezmiller

    VK Guest

    ezmiller wrote:
    > 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!) :)
     
    VK, Dec 6, 2005
    #2
    1. Advertising

  3. ezmiller

    ezmiller Guest

    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.
     
    ezmiller, Dec 6, 2005
    #3
  4. ezmiller

    Tony Guest

    >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.
     
    Tony, Dec 6, 2005
    #4
  5. ezmiller

    VK Guest

    ezmiller wrote:
    > 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 ;-)
     
    VK, Dec 6, 2005
    #5
  6. ezmiller

    ezmiller Guest

    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....
     
    ezmiller, Dec 6, 2005
    #6
  7. VK wrote:

    > ezmiller wrote:
    >> 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;">
    |
    | [...]
    | <!ELEMENT DIV - - (%flow;)* -- generic language/style container -->

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


    Q.e.d.? ;-)


    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 8, 2005
    #7
  8. ezmiller wrote:

    > 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
     
    Thomas 'PointedEars' Lahn, Dec 8, 2005
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. WhiskeyRomeo

    Writing HTML & Server controls dynamically

    WhiskeyRomeo, Dec 5, 2007, in forum: ASP .Net
    Replies:
    6
    Views:
    515
    Registered User
    Dec 8, 2007
  2. Robby Bankston
    Replies:
    7
    Views:
    250
    wasntme
    Jun 17, 2005
  3. ezmiller
    Replies:
    2
    Views:
    93
    ezmiller
    Dec 6, 2005
  4. ezmiller
    Replies:
    2
    Views:
    163
    Thomas 'PointedEars' Lahn
    Dec 15, 2005
  5. Faisal Vali
    Replies:
    10
    Views:
    250
    Thomas 'PointedEars' Lahn
    Jun 21, 2008
Loading...

Share This Page