1

I'm new to Javascript and I'm having a strange issue. Javascript generated table elements were not working in IE, but they worked fine in every other browser I've tried. I managed to isolate the issue to adding child elements in JS:

var table = document.createElement("table");
var tabler = document.createElement("tr");
var tab = document.createElement("td");
var node = document.createTextNode('test');
textdiv.appendChild(table);
table.appendChild(tabler);
tabler.appendChild(tab);
tab.appendChild(node);

The above creates a table with a single text element properly in chrome, but in IE it is completely blank.

I did some experimenting and found that this code:

var table = document.createElement("table");
var tabler = document.createElement("tr");
var tab = document.createElement("td");
var node = document.createTextNode('test');
textdiv.appendChild(table.appendChild(tabler.appendChild(tab.appendChild(node))));

Does work in both IE and Chrome, but the table is being formatted to align to center, whereas the first code aligned it to the left (css has body aligned to center).

What's going on here?

Dracunos
  • 79
  • 10

1 Answers1

3

I believe your issue is that you don't have a <tbody> in your table. See this similar post for a longer explanation:

Can't dynamically add rows to a <TABLE> in IE?

Community
  • 1
  • 1
Philip Snyder
  • 54
  • 3
  • Could be the issue, I don't know, but a `` element is **not** required unless a `thead` or `tfoot` is also present, so `tbody` is not needed according to the spec., – adeneo Jan 07 '16 at 21:00
  • 1
    Yes, it's not required according to spec, however since when has IE really followed spec? :) – Philip Snyder Jan 07 '16 at 21:03