Dynamic element creation removes HTML from innerHTML

[bgold12]

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]

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?

 

[RobG]

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.

 

[RobG]

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

 

[bgold12]

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?

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

 

[Arun]

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

 

[RobG]

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.

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.

 

[dhtml]

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