A warning about dynamic table creation

Discussion in 'Javascript' started by Rex the Strange, Mar 6, 2008.

  1. BIG WARNING!!

    I just spent hours trying to figure this out! If you're doing dynamic
    javascript and you're trying to create a table on the fly using
    createElement then HEED THIS WARNING!


    You would think that you could get away with this:

    var page_element = document.getElementById ("parent_element_name");

    var table = document.createElement ("table");
    var row = document.createElement ("tr");
    var cell = document.createElement ("td");

    page_element.appendChild (table);
    table.appendChild (row);
    row.appendChild (cell);

    cell.innerHTML = "this is where the live stuff goes";

    And Firefox has no problems with this. Internet Explorer will puke!
    Well, actually, IE does nothing at all and you can poll your page for
    the elements and you will find them. They're there, but they don't
    show up on the page. You need:

    var body = document.createElement ("tbody"); (or thead or tfoot)

    Link that to the table and the row to that:

    table.appendChild (body);
    body.appendChild (row);

    And everything is hunky dorey! I just wasted a big piece of my life on
    this one so I'm hoping I can save some people the same heartache. By
    the way, Firefox doesn't care either way, so use the latter for better
    cross-browser compatibility (also works in Opera and PC Safari - don't
    know about Mac Safari).
    Rex the Strange, Mar 6, 2008
    #1
    1. Advertising

  2. Rex the Strange

    Henry Guest

    On Mar 6, 7:24 pm, Rex the Strange wrote:
    > BIG WARNING!!
    >
    > I just spent hours trying to figure this out! If you're
    > doing dynamic javascript and you're trying to create a
    > table on the fly using createElement then HEED THIS
    > WARNING!


    Or at least the warning implied by this warning.

    > You would think that you could get away with this:
    >
    > var page_element = document.getElementById ("parent_element_name");
    >
    > var table = document.createElement ("table");
    > var row = document.createElement ("tr");
    > var cell = document.createElement ("td");
    >
    > page_element.appendChild (table);
    > table.appendChild (row);


    No, you absolutely should not expect to be able to "get away with"
    that in an HTML DOM. The structural constraints of HTML do not allow a
    TR element to be the direct child of any type of element except a
    table section element (TBODY, THEAD or TFOOT). It makes as little
    sense to attempt to make a TR a direct child of a TABLE as it would to
    attempt to make one a direct child of a SELECT element.

    > row.appendChild (cell);
    >
    > cell.innerHTML = "this is where the live stuff goes";
    >
    > And Firefox has no problems with this.
    > Internet Explorer will puke!


    No it doesn't. IE just does not tolerate your mistake or take any
    action to correct it. That could never be an unexpected outcome as the
    spectrum of possible mistakes is far too great to allow them all to be
    accommodated, or even for those that are handled to be consistently
    handled (over time or across browsers).

    > Well, actually, IE does nothing at all and you can poll your
    > page for the elements and you will find them. They're there,
    > but they don't show up on the page.


    So IE does do something. In fact it does precisely what you programmed
    it to do; it is just that the nonsense structure you have created
    cannot be visually represented by a system that is expecting a
    structure resembling an HTML DOM.

    > You need:
    >
    > var body = document.createElement ("tbody"); (or thead or tfoot)


    Not "need". Any table section element will do as an intermediate
    between the TABLE and the TRs, and in some circumstances a TBODY would
    be an inappropriate choice.

    > Link that to the table and the row to that:
    >
    > table.appendChild (body);
    > body.appendChild (row);
    >
    > And everything is hunky dorey!


    So building a DOM structure that conforms to the structural
    constraints of HTML results in the (reasonably) consistent handling of
    that structure (including its rendering)? Now that is something that
    you should expect to be able to "get away with".

    > I just wasted a big piece of my life on this one so I'm
    > hoping I can save some people the same heartache.

    <snip>

    Which would be better done by identifying the cause and effect
    relationship that resulted in your issue rather than shouting about a
    specific manifestation of the effect.

    You problem is that you are attempting the script the interactions
    with an HTML document before understanding what HTML is. That is an
    approach that will leave you spending big pieces of your life stabbing
    about in the dark trying to solve problems that never needed to occur
    in the first place. And that is the real warning here.
    Henry, Mar 7, 2008
    #2
    1. Advertising

  3. Henry wrote:
    > On Mar 6, 7:24 pm, Rex the Strange wrote:
    >> You would think that you could get away with this:
    >>
    >> var page_element = document.getElementById ("parent_element_name");
    >>
    >> var table = document.createElement ("table");
    >> var row = document.createElement ("tr");
    >> var cell = document.createElement ("td");
    >>
    >> page_element.appendChild (table);
    >> table.appendChild (row);

    >
    > No, you absolutely should not expect to be able to "get away with"
    > that in an HTML DOM. The structural constraints of HTML do not allow a
    > TR element to be the direct child of any type of element except a
    > table section element (TBODY, THEAD or TFOOT). It makes as little
    > sense to attempt to make a TR a direct child of a TABLE as it would to
    > attempt to make one a direct child of a SELECT element.


    The restriction enforced by the DOM is based on

    http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
    http://www.w3.org/TR/html4/sgml/loosedtd.html

    However, it should be noted that the TBODY element is not necessary to write
    in HTML 4.01 markup because both its start tag and its end tag are optional
    in all relevant DTDs. Therefore it makes rather little sense to me to
    enforce its creation in DOM scripting instead of having it automatically
    generated where needed, but there it is.


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
    Thomas 'PointedEars' Lahn, Mar 7, 2008
    #3
  4. Rex the Strange

    Henry Guest

    Thomas 'PointedEars' Lahn wrote:
    > Henry wrote:
    >> On Mar 6, 7:24 pm, Rex the Strange wrote:
    >>> You would think that you could get away with this:
    >>>
    >>> var page_element = document.getElementById
    >>> ("parent_element_name");
    >>>
    >>> var table = document.createElement ("table");
    >>> var row = document.createElement ("tr");
    >>> var cell = document.createElement ("td");
    >>>
    >>> page_element.appendChild (table);
    >>> table.appendChild (row);

    >>
    >> No, you absolutely should not expect to be able to "get
    >> away with" that in an HTML DOM. The structural constraints
    >> of HTML do not allow a TR element to be the direct child
    >> of any type of element except a table section element
    >> (TBODY, THEAD or TFOOT). It makes as little sense to
    >> attempt to make a TR a direct child of a TABLE as it would
    >> to attempt to make one a direct child of a SELECT element.

    >
    > The restriction enforced by the DOM is based on
    >
    > http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
    > http://www.w3.org/TR/html4/sgml/loosedtd.html
    >
    > However, it should be noted that the TBODY element is not
    > necessary to write in HTML 4.01 markup because both its
    > start tag and its end tag are optional in all relevant DTDs.


    That still results in a TBODY existing. Except in XHTML or course,
    where TR may be direct children of TABLE (not a good idea but
    understandable given XHTML having some desire to be 'compatible'
    with HTML while not tolerating optional tags or implied elements).

    > Therefore it makes rather little sense to me to enforce its
    > creation in DOM scripting instead of having it automatically
    > generated where needed, but there it is.


    While it is (obviously as it already happens) possible to 'fix'
    attempts to create erroneous DOM structures that programmers attempt
    to create by inserting omitted elements the attempt is not without
    its issues. First there is what you would do in an XHTML DOM, where
    the intervening table section elements is not required, but can be
    used; do you add one regardless or always omit them. Then there is
    the situation in HTML; if a TR is appended to a table and the table
    already has a TBODY do you instead append to the existing TBODY or
    add a new one, and if a second TR is appended does it get added to
    an existing TBODY (possibly the one added by the last appended TR)
    or does it get a new TBODY of its own. Without a very clear
    standard on how this situation it to be handled you are likely to
    get different outcomes from each and every browser. Followed by lots
    of complaints that browsers have bugs because they are not doing
    precisely the same as other browsers.

    On the whole it is probably better to have the browser create the
    DOM structure exactly as the programmer asks it to, and let the
    programmer be responsible for building a structure that makes
    sense in the type of DOM they are using.
    Henry, Mar 10, 2008
    #4
    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. Pete Becker
    Replies:
    0
    Views:
    1,373
    Pete Becker
    Feb 10, 2005
  2. B. Williams

    warning C4267 and warning C4996

    B. Williams, Oct 26, 2006, in forum: C++
    Replies:
    17
    Views:
    2,629
  3. Dynamic Creation of table

    , Sep 25, 2006, in forum: ASP General
    Replies:
    2
    Views:
    149
    Dr John Stockton
    Sep 26, 2006
  4. The_Original_MB
    Replies:
    2
    Views:
    192
    The_Original_MB
    Feb 7, 2005
  5. Dynamic Creation of table

    , Sep 25, 2006, in forum: Javascript
    Replies:
    2
    Views:
    125
    Dr John Stockton
    Sep 26, 2006
Loading...

Share This Page