New DOM elements invisible in IE, fine in FireFox

[robert.oschler]

I have an AJAX driven page where I dynamically add rows to a known
table on the page, based on the return document from the AJAX call,
using DOM node methods (except for a small snippet of code, see below)
.. The code I use to do that is shown below.

The code runs fine in FireFox. I can see the newly created table rows
and everything looks fine on the page. In Internet Explorer, I don't
see any changes to the page after the new nodes are added.

I traced into the code using Microsoft's debugger. If I walk the child
nodes of the target table using the Immediate window (same as Mozilla
debugger's interactive window), I do see the newly created elements.
If I inspect the innerHTML of the new nodes I do see the HTML code in
proper format. But the page does not show the new elements at all.

Is this an Internet Explorer oddity and if so, what can I do to get
things working?

Thanks.

--------------------------

// Append the contents of TABLE in the "show links" DIV to the new
link.
// Helper function to build the mini table for the submitting user
name and notes.
function getShowLinkMiniTable(userName, notes)
{
var tblHtml =
"<TABLE ALIGN=LEFT VALIGN=TOP>\n" +
" <TR>\n" +
" <TD WIDTH=\"30%\">\n" +
" <P><b>Submitter:</b> " + userName + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
" <TR>\n" +
" <TD WIDTH=\"70%\">\n" +
" <P><b>Notes:</b> " + notes + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
"</TABLE>\n";

return tblHtml;
} // function getShowLinkMiniTable()
function appendShowLink(linkNum, linkHtml, userName, notes)
{
var tblShowLinks = document.getElementById("tblShowLinks");

if (!tblShowLinks)
{
alert("(appendShowLink) Unable to find the show links table.");
return;
}

// New row.
var trNew = document.createElement("TR");

// New cell - link num.
var pLinkNum = document.createElement("P");
pLinkNum.innerHTML = "" + linkNum;

var tdLinkNum = document.createElement("TD");
tdLinkNum.setAttribute("WIDTH", "10%");
tdLinkNum.setAttribute("VALIGN", "TOP");
// tdLinkNum.setAttribute("innerHTML", "" . linkNum);
tdLinkNum.appendChild(pLinkNum);

// New cell - link html.
var pLinkHtml = document.createElement("P");
pLinkHtml.innerHTML = linkHtml;

var tdLinkHtml = document.createElement("TD");
tdLinkHtml.setAttribute("WIDTH", "20%");
// tdLinkHtml.setAttribute("innerHTML", linkHtml);
tdLinkHtml.appendChild(pLinkHtml);

var tdUserMiniTable = document.createElement("TD");
tdUserMiniTable.setAttribute("WIDTH", "70%");
tdUserMiniTable.setAttribute("VALIGN", "TOP");

tdUserMiniTable.innerHTML = getShowLinkMiniTable(userName, notes);
// tdUserMiniTable.innerHTML = "<p>hello</p>";

// Add the cells to the row.
trNew.appendChild(tdLinkNum);
trNew.appendChild(tdUserMiniTable);
trNew.appendChild(tdLinkHtml);

// Add the new table data element to the table.
tblShowLinks.appendChild(trNew);
} // function setShowLinks()

 

[Randy Webb]

(e-mail address removed) said the following on 4/1/2006 3:37 PM:

I have an AJAX driven page where I dynamically add rows to a known
table on the page, based on the return document from the AJAX call,
using DOM node methods (except for a small snippet of code, see below)
.. The code I use to do that is shown below.

The code runs fine in FireFox. I can see the newly created table rows
and everything looks fine on the page. In Internet Explorer, I don't
see any changes to the page after the new nodes are added.

I traced into the code using Microsoft's debugger. If I walk the child
nodes of the target table using the Immediate window (same as Mozilla
debugger's interactive window), I do see the newly created elements.
If I inspect the innerHTML of the new nodes I do see the HTML code in
proper format. But the page does not show the new elements at all.

Is this an Internet Explorer oddity and if so, what can I do to get
things working?

Don't use setAttribute with IE, set the property directly:

tdLinkNum.width="10%"; instead of:
tdLinkNum.setAttribute("WIDTH", "10%");

Also, IE requires you to have a TBODY in your code, so you have to
create one (or hard code it).

 

[RobG]

I have an AJAX driven page where I dynamically add rows to a known
table on the page, based on the return document from the AJAX call,
using DOM node methods (except for a small snippet of code, see below)
. The code I use to do that is shown below.

The code runs fine in FireFox. I can see the newly created table rows
and everything looks fine on the page. In Internet Explorer, I don't
see any changes to the page after the new nodes are added.

Don't use innerHTML to modify a table. According to Microsoft's
documentation, you shouldn't use innerHTML on any table element other than
a TD.

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp>


Secondly, IE requires that TR elements added to a table are added to a
tbody. There are two fixes for that: use insertRow, which adds rows
directly to the table, or find the TBODY element and add your rows to that.

You don't need to explicitly create a tbody. It is a mandatory element in
a table, but the tags are optional. When you create your table below, a
tbody is created automatically.

I traced into the code using Microsoft's debugger. If I walk the child
nodes of the target table using the Immediate window (same as Mozilla
debugger's interactive window), I do see the newly created elements.
If I inspect the innerHTML of the new nodes I do see the HTML code in
proper format. But the page does not show the new elements at all.

Is this an Internet Explorer oddity and if so, what can I do to get
things working?

Thanks.

--------------------------

// Append the contents of TABLE in the "show links" DIV to the new
link.
// Helper function to build the mini table for the submitting user
name and notes.
function getShowLinkMiniTable(userName, notes)
{
var tblHtml =
"<TABLE ALIGN=LEFT VALIGN=TOP>\n" +
" <TR>\n" +
" <TD WIDTH=\"30%\">\n" +
" <P><b>Submitter:</b> " + userName + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
" <TR>\n" +
" <TD WIDTH=\"70%\">\n" +
" <P><b>Notes:</b> " + notes + "</P>\n" +
" </TD>\n" +
" </TR>\n" +
"</TABLE>\n";

return tblHtml;
} // function getShowLinkMiniTable()
function appendShowLink(linkNum, linkHtml, userName, notes)
{
var tblShowLinks = document.getElementById("tblShowLinks");

Guessing that tblShowLinks is now a reference to the table...

if (!tblShowLinks)
{
alert("(appendShowLink) Unable to find the show links table.");
return;
}

// New row.
var trNew = document.createElement("TR");

Change this line to:

var trNew = tblShowLinks.insertRow(-1);

trNew is now a reference to a new row in your table. The row will be
inserted at the index provided, -1 inserts it as the last row.

// New cell - link num.
var pLinkNum = document.createElement("P");
pLinkNum.innerHTML = "" + linkNum;

var tdLinkNum = document.createElement("TD");
tdLinkNum.setAttribute("WIDTH", "10%");
tdLinkNum.setAttribute("VALIGN", "TOP");
// tdLinkNum.setAttribute("innerHTML", "" . linkNum);
tdLinkNum.appendChild(pLinkNum);

You can shorten your code using insertCell:

var tdLinkNum = trNew.insertCell(-1);
tdLinkNum.style.width = "10%";
tdLinkNum.style.verticalAlign = "top";

Cell is already appended to the tr by insertCell, so no need for
appendChild. Check out the DOM HTMLTableElement and related interfaces:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425>

summarised and collated here:

<URL:http://developer.mozilla.org/en/docs/DOM:table#HTML_Form_Element_Interface>


They were introduced with DOM 1 and are very widely supported.

// New cell - link html.
var pLinkHtml = document.createElement("P");
pLinkHtml.innerHTML = linkHtml;

var tdLinkHtml = document.createElement("TD");
tdLinkHtml.setAttribute("WIDTH", "20%");
// tdLinkHtml.setAttribute("innerHTML", linkHtml);
tdLinkHtml.appendChild(pLinkHtml);

var tdUserMiniTable = document.createElement("TD");
tdUserMiniTable.setAttribute("WIDTH", "70%");
tdUserMiniTable.setAttribute("VALIGN", "TOP");

tdUserMiniTable.innerHTML = getShowLinkMiniTable(userName, notes);
// tdUserMiniTable.innerHTML = "<p>hello</p>";

// Add the cells to the row.
trNew.appendChild(tdLinkNum);
trNew.appendChild(tdUserMiniTable);
trNew.appendChild(tdLinkHtml);

// Add the new table data element to the table.
tblShowLinks.appendChild(trNew);

Alternatively, get the tbody here (not needed if insertRow has been used,
the appendChild line can be deleted):

var tbody = tblShowLinks.getElementsByTagName('tbody')[0];
tbody.appendChild(trNew);

 

[robert.oschler]

Thank you both for your excellent replies, that's exactly what I needed.