Internet Explorer won't append table rows using appendChild

Greetings, forumers,

I've written a page in ASP which queries a db for results (blah, blah, blah), and the results are outputted to the page as they are retrieved.

However, the crux of the problem is that I want to display a 'quicklink' (with just the name of the article and a supplier logo) in the table column that's rendered before the results are retrieved.

I've written the following code, which works fantastically well in Mozilla / Phoenix, but IE rejects it.

<script language="Javascript">
var link = document.createElement('a');
var span = document.createElement('span');
var txt = "EPSON GPS Receiver Module S4E398600010000";
var image = document.createElement('img');
var tr = document.createElement('tr');
var td = document.createElement('td');
link.setAttribute('href','#1');
span.setAttribute('class','editorialQuickLinkTitle');
link.innerHTML = txt;
span.appendChild(link);
image.setAttribute('src','/Images/Logos/Miniatures/epson.png');
image.setAttribute('border','0');
image.setAttribute('vspace','5');
image.setAttribute('hspace','5');
td.setAttribute('class','block');
td.appendChild(span);
td.appendChild(document.createElement('br'));
td.appendChild(image);
tr.appendChild(td);
document.getElementById('querySummary').appendChild(tr);
</script>

Anyone have any thoughts? I'd be happy to leave it as a Mozilla-only thing, but unfortunately most of the users of the site are IE lovers, and I would like to integrate the code into other portions of the site where it will be far more visible.

Thanks for your thoughts (in advance :thumbsup: )

Try creating a tfoot, thead or tbody to place the tr in, and it should work better.

That did the trick - add in the <TBODY> tag to wrap the rows in, and it's all good ;)

Thanks heaps!

There seems to be just one more problem.

Internet Explorer's not applying the styles I've specified to the cells.

Again, there's no problem in Mozilla, but IE's causing me grief.

I'd be guessing that it's not executing the setAttribute function correctly?

setAttribute('class',[string classAttribute]) doesn't work in ie, because of the way ie maps elm.setAttribute(sName,sValue) to elm[sName]=sValue. Since class is a reserved keyword in JavaScript W3C mapped className instead of class to the class attribute.

Thus, use elm.className=value; instead.

Man... you're a freaking genius.

Can't thank you enough for your help, Liorean!

Where'd you learn such things???

Been there, done that. And this. And thus ;) I've learnt to cope with some of the quirks you encounter in various browsers.

I've been working with javascript since nn2 introduced it in 1995 - I've had my chances to encounter this type of problem. I've read the specs and often revisit them. I follow disussions here, on evolt's [theList], on [wdf-dom], [wd-l], [css-d] and JS-Jive. Also, I keep up to date with for example PPK's DOM compatibility tables, do my own testing, and hear the news through a number of blogs.


But, if you want to learn the quirks of various browsers, you must work with them. That's the only way to really learn.

Hi, i'm having the same problem with the appendChild method... actually after I read your previous post, I've altered my function and it no longer gives an erro message. The problem is that it doesn't append the item to the page either. What I want to do is simply to get values from a form in a popup and sending them to the opener form while creating the fields in a table dinamically. with the code below You'll probably see the problem in a heartbeat...

function cria(contador){
var aux = opener.document.getElementById("databody")[0];

var nome1 = "dado"+contador+"a";
var nome2 = "dado"+contador+"b";
var nome3 = "dado"+contador+"c";

var corpo = document.createElement("TBODY");
var row = document.createElement("TR");
var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
var td3 = document.createElement("TD");

var in1 = document.createElement("input");
in1.value = document.getElementById('dado1').value;
in1.id = nome1;
td1.appendChild(in1);

var in2 = document.createElement("input");
in2.value = document.getElementById('dado2').value;
in2.id = nome2;
td2.appendChild(in2);

var in3 = document.createElement("input");
in3.value = document.getElementById('dado3').value;
in3.id = nome3;
td3.appendChild(in3);

corpo.appendChild(row)
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);


window.opener.document.getElementById("databody").appendChild(corpo);
window.close();
}

The contador variable is a counter that I use to index the appended items.
I would really apreciate if you could give a hand... :thumbsup: as you can see i'm very unexperienced...

if your root is on the opener, than try create elements as opener's elements as well. Try

var corpo = opener.document.createElement("TBODY");
var row = opener.document.createElement("TR");
and so on...

Hey liorean,

I've just had exactly the same problem as Vlaad. Who'd have thought: TBody!

Cheers, you saved my day.

Hey liorean,

I've just had exactly the same problem as Vlaad. Who'd have thought: TBody!

Cheers, you saved my day.

Same here. :D

if you would have the curiosity to alert a table's innerHTML, you should have noticed that the tbody is shown as a child node nomatter if it is really HTML written there or not. In fact it looks like tbody is a compulsory element of a table.