Dynamic element creation removes HTML from innerHTML

Discussion in 'Javascript' started by bgold12, Sep 1, 2008.

  1. bgold12

    bgold12 Guest

    I'm adding a <tr> element dynamically to a web page. The relevant HTML
    starts off like the following:

    <table><tbody id="tbodyID">
    <tr>...</tr>
    <tr>...</tr>
    </tbody></table>

    After the page has loaded, I use the following javascript code to add
    a new table row:

    var newRow = document.createElement('tr');
    newRow.innerHTML = '<td><p>...</p></td><td><p>...</p></td><td><p>...</
    p></td>';

    var tbodyElem = document.getElementById('tbodyID');

    tbodyElem.appendChild(newRow);

    This works, except for one very strange thing: the table data open and
    close tags (the <td> and </td>) disappear in the final innerHTML of
    the new <tr> element! When I print the innerHTML of the element, I see
    something like the following:

    <p>...</p><p>...</p><p>...</p>

    So everything remains except for the open and close <td> tags. How can
    the innerHTML I set for the new <tr> element be stripped of particular
    tags like this?

    bgold12
    bgold12, Sep 1, 2008
    #1
    1. Advertising

  2. bgold12

    bgold12 Guest

    There's another weird thing going on here. I just read that the
    <tbody> element is not widely used cause it's not well-supported, so I
    got rid of it, and I'm just using the <table><tr><td> elements. But
    when I create a table without a <tbody> element, it's added
    automatically (it seems). For example, when I print out the inner HTML
    of a table element that I did not add a tbody element to, I see
    something like the following:

    <tbody> ... the <tr>'s and <td>'s that I added myself ... </tbody>

    Why is this happening?
    bgold12, Sep 1, 2008
    #2
    1. Advertising

  3. bgold12

    RobG Guest

    On Sep 1, 10:33 pm, bgold12 <> wrote:
    > There's another weird thing going on here. I just read that the
    > <tbody> element is not widely used cause it's not well-supported,


    Hopefully you have misunderstood the situtation - a tbody element is
    mandatory in an HTML table even though the tags are optional.

    When using DOM methods to add TR elements to a table, IE requires that
    they are appended to a table section element (tbody, thead, tfoot)
    whereas other browsers will let you append them to the table element,
    but actually add them to a tbody element.

    > so I
    > got rid of it, and I'm just using the <table><tr><td> elements. But
    > when I create a table without a <tbody> element, it's added
    > automatically (it seems).


    As the HTML 4.01 specification requires.


    > For example, when I print out the inner HTML
    > of a table element that I did not add a tbody element to, I see
    > something like the following:
    >
    > <tbody> ... the <tr>'s and <td>'s that I added myself ... </tbody>
    >
    > Why is this happening?


    Because it is supposed to.


    --
    Rob
    RobG, Sep 1, 2008
    #3
  4. bgold12

    RobG Guest

    On Sep 1, 10:21 pm, bgold12 <> wrote:
    > I'm adding a <tr> element dynamically to a web page. The relevant HTML
    > starts off like the following:
    >
    > <table><tbody id="tbodyID">
    >   <tr>...</tr>
    >   <tr>...</tr>
    > </tbody></table>
    >
    > After the page has loaded, I use the following javascript code to add
    > a new table row:
    >
    > var newRow = document.createElement('tr');
    > newRow.innerHTML = '<td><p>...</p></td><td><p>...</p></td><td><p>...</
    > p></td>';


    Do not use innerHTML for parts of a table, MS expressly states that IE
    doesn't support it (and likely some other browsers)[1]. It can be
    used for an entire table or the content of a cell.

    1. <URL: http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
    >



    --
    Rob
    RobG, Sep 1, 2008
    #4
  5. bgold12

    bgold12 Guest

    On Sep 1, 9:15 am, RobG <> wrote:
    > On Sep 1, 10:21 pm, bgold12 <> wrote:
    >
    > > I'm adding a <tr> element dynamically to a web page. The relevant HTML
    > > starts off like the following:

    >
    > > <table><tbody id="tbodyID">
    > >   <tr>...</tr>
    > >   <tr>...</tr>
    > > </tbody></table>

    >
    > > After the page has loaded, I use the following javascript code to add
    > > a new table row:

    >
    > > var newRow = document.createElement('tr');
    > > newRow.innerHTML = '<td><p>...</p></td><td><p>...</p></td><td><p>...</
    > > p></td>';

    >
    > Do not use innerHTML for parts of a table, MS expressly states that IE
    > doesn't support it (and likely some other browsers)[1].  It can be
    > used for an entire table or the content of a cell.
    >
    > 1. <URL:http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
    >
    >
    >
    > --
    > Rob


    Thanks Rob. For the record, the quote "The <thead>,<tbody> and <tfoot>
    elements are seldom used, because of bad browser support." comes from
    the w3schools site (http://www.w3schools.com/TAGS/tag_tbody.asp). I've
    always assumed that the w3schools site is a good source for
    information about HTML and such. Is it not?

    Secondly, it also says on that site that "If you use the thead, tfoot
    and tbody elements, you must use every element. They should appear in
    this order: <thead>, <tfoot> and <tbody>, so that browsers can render
    the foot before receiving all the data. You must use these tags within
    the table element." Is this correct? If so, something really messed up
    is going on here. If all three tags are mandatory if any of them are
    used, how can browsers be automatically adding JUST the tbody element
    to tables? This is very confusing (and frustrating).

    bgold12
    bgold12, Sep 1, 2008
    #5
  6. bgold12

    Arun Guest

    > Secondly, it also says on that site that "If you use the thead, tfoot
    > and tbody elements, you must use every element. They should appear in
    > this order: <thead>, <tfoot> and <tbody>, so that browsers can render
    > the foot before receiving all the data.
    >
    > bgold12


    Or perhaps as you said previously, the <tbody> tag gets added
    automatically
    because the table is presuming that the end row-group is always a
    <tbody>
    and if there's none present there should be one toward the end of the
    table.
    Perhaps, all parsers evaluate table bodies for <tfoot> before <tbody>?

    Arun
    Arun, Sep 1, 2008
    #6
  7. bgold12

    RobG Guest

    On Sep 1, 11:38 pm, bgold12 <> wrote:
    > On Sep 1, 9:15 am, RobG <> wrote:
    >
    >
    >
    > > On Sep 1, 10:21 pm, bgold12 <> wrote:

    >
    > > > I'm adding a <tr> element dynamically to a web page. The relevant HTML
    > > > starts off like the following:

    >
    > > > <table><tbody id="tbodyID">
    > > >   <tr>...</tr>
    > > >   <tr>...</tr>
    > > > </tbody></table>

    >
    > > > After the page has loaded, I use the following javascript code to add
    > > > a new table row:

    >
    > > > var newRow = document.createElement('tr');
    > > > newRow.innerHTML = '<td><p>...</p></td><td><p>...</p></td><td><p>....</
    > > > p></td>';

    >
    > > Do not use innerHTML for parts of a table, MS expressly states that IE
    > > doesn't support it (and likely some other browsers)[1].  It can be
    > > used for an entire table or the content of a cell.

    >
    > > 1. <URL:http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

    >
    > Thanks Rob. For the record, the quote "The <thead>,<tbody> and <tfoot>
    > elements are seldom used, because of bad browser support." comes from
    > the w3schools site (http://www.w3schools.com/TAGS/tag_tbody.asp). I've
    > always assumed that the w3schools site is a good source for
    > information about HTML and such. Is it not?


    It is OK as an introduction to various topics, however its advice in
    regard to HTML and javascript (at least) is less than authoritative.
    As with any reference, seek a second opinion for eveything you learn
    there.


    > Secondly, it also says on that site that "If you use the thead, tfoot
    > and tbody elements, you must use every element. They should appear in
    > this order: <thead>, <tfoot> and <tbody>, so that browsers can render
    > the foot before receiving all the data. You must use these tags within
    > the table element." Is this correct?


    Those are HTML questions which are likely better answered in an HTML
    group[1]. But since we're here... some of it is true, some is
    rubbish.

    The HTML 4.01 specification states that a table must have a tbody
    (tags are optional), and it can have a thead and a tfoot. It doesn't
    say that the presence of a thead *requires* a tfoot also (or vice
    versa), however I'd defer interpretation of that part of the spec to
    the HTML group. The relevant section is:

    TFOOT must appear before TBODY within a TABLE definition so
    that user agents can render the foot before receiving all
    of the (potentially numerous) rows of data. The following
    summarizes which tags are required and which may be omitted:

    * The TBODY start tag is always required except when the
    table contains only one table body and no table head or
    foot sections. The TBODY end tag may always be safely
    omitted.
    * The start tags for THEAD and TFOOT are required when
    the table head and foot sections are present
    respectively, but the corresponding end tags may always
    be safely omitted.

    Conforming user agent parsers must obey these rules for
    reasons of backward compatibility.

    <URL: http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE >


    > If so, something really messed up
    > is going on here. If all three tags are mandatory if any of them are
    > used, how can browsers be automatically adding JUST the tbody element
    > to tables? This is very confusing (and frustrating).


    Browsers are doing what the spec says they should do. A tbody element
    is mandatory, but the tbody tags are optional if there is no thead or
    tfoot element. Note also that the closing tags are always optional.


    --
    Rob
    RobG, Sep 2, 2008
    #7
  8. bgold12

    dhtml Guest

    RobG wrote:
    > On Sep 1, 11:38 pm, bgold12 <> wrote:
    >> On Sep 1, 9:15 am, RobG <> wrote:
    >>
    >>
    >>
    >>> On Sep 1, 10:21 pm, bgold12 <> wrote:



    >>> 1. <URL:http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

    >> Thanks Rob. For the record, the quote "The <thead>,<tbody> and <tfoot>
    >> elements are seldom used, because of bad browser support." comes from
    >> the w3schools site (http://www.w3schools.com/TAGS/tag_tbody.asp). I've
    >> always assumed that the w3schools site is a good source for
    >> information about HTML and such. Is it not?

    >
    > It is OK as an introduction to various topics, however its advice in
    > regard to HTML and javascript (at least) is less than authoritative.
    > As with any reference, seek a second opinion for eveything you learn
    > there.
    >


    W3schools is an unreliable source of information. They're not affiliated
    with the w3c and the site often comes up #1 when searching for w3c DOM,
    et al.

    That that is site linked from the FAQ. It probably shouldn't be.

    Garrett

    >
    > --
    > Rob
    dhtml, Sep 2, 2008
    #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. Ronald Colijn
    Replies:
    1
    Views:
    535
    Martin Eklund
    Nov 27, 2003
  2. gbruno
    Replies:
    9
    Views:
    1,842
    steve
    Jun 8, 2005
  3. Scott Elwood

    File.open of HTML file removes code

    Scott Elwood, Apr 27, 2011, in forum: Ruby
    Replies:
    5
    Views:
    122
    Scott Elwood
    Apr 28, 2011
  4. Replies:
    0
    Views:
    118
  5. sonic
    Replies:
    5
    Views:
    270
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page