Problem dynamically writing html-- table not showing up

[ezmiller]

Hi,
I have some code (which I will paste in below) that writes out some
HTML dynamically using the W3C DOM...the last part of the code write
out a simple table. MY problem is that the table is not showing up,
even though it seems to be part of the document (i.e. I can reach the
nodes through through document.body.getElementsByTagName... )

var e;
var f; // Will hold a document fragment.


document.getElementsByTagName("head")[0].appendChild(document.createElement("title"));
document.title = "Page Title";

e = document.createElement("p");
e.setAttribute("id","p1");
e.innerHTML = "Here is a short paragraph.";
document.body.appendChild(e);

f = document.createDocumentFragment();
f.appendChild(document.createElement("ul"))
e = document.createElement("li");
e.appendChild(document.createTextNode("Item #1"));
f.childNodes[0].appendChild(e);
e = document.createElement("li");
e.appendChild(document.createTextNode("Item #2"));
f.childNodes[0].appendChild(e);
e = document.createElement("li");
e.appendChild(document.createTextNode("Item #3"));
f.childNodes[0].appendChild(e);
document.body.appendChild(f);

document.body.appendChild(document.createElement("div"));

f = document.createDocumentFragment();
f.appendChild(document.createElement("table"));
for (var i=0; i<3; i++) {
e = document.createElement("tr");
e.appendChild(document.createElement("td"));
e.appendChild(document.createElement("td"));
e.getElementsByTagName("td")[0].innerHtml =("C"+i+",0");
e.getElementsByTagName("td")[1].innerHtml = ("C"+i+",1");
f.getElementsByTagName("table")[0].appendChild(e);
}
document.getElementsByTagName("div")[0].appendChild(f);

 

[RobG]

Hi,
I have some code (which I will paste in below) that writes out some
HTML dynamically using the W3C DOM...the last part of the code write
out a simple table. MY problem is that the table is not showing up,
even though it seems to be part of the document (i.e. I can reach the
nodes through through document.body.getElementsByTagName... )

var e;
var f; // Will hold a document fragment.

f is unnecessary.

document.getElementsByTagName("head")[0].appendChild(document.createElement("title"));

If your page did not already have a title element, it was invalid HTML.

document.title = "Page Title";

I'm not sure that modifying the document title property is the same as
changing the content of the title element... too late for testing, I'll
leave that to you (or someone else).

e = document.createElement("p");

Features that may not be supported by all browsers/UAs should be tested
before use.

e.setAttribute("id","p1");
e.innerHTML = "Here is a short paragraph.";

Mixing W3 DOM and non-standard innerHTML is not a good idea:

e.appendChild(document.createTextNode('Here ...'));

document.body.appendChild(e);

Depending on your doctype and browser:

var docBody = document.body || document.documentElement;
docBody.appendChild(e);


may be safer.

f = document.createDocumentFragment();

You don't need the document fragment. You append everything to the UL,
then append that to the document so just create f as a reference to the
UL and go from there:

f.appendChild(document.createElement("ul"))

f = document.createElement('ul');
e = ...

e = document.createElement("li");
e.appendChild(document.createTextNode("Item #1"));

A loop would be much simpler, I guess this is just a sample...

f.childNodes[0].appendChild(e);

If f is used as suggested above:

f.appendChild(e);

e = document.createElement("li");
e.appendChild(document.createTextNode("Item #2"));
f.childNodes[0].appendChild(e);

If f is used as suggested, replace this line with:

f.appendChild(e);

e = document.createElement("li");
e.appendChild(document.createTextNode("Item #3"));
f.childNodes[0].appendChild(e);

If f is used as suggested, replace this line with:

f.appendChild(e);

document.body.appendChild(f);

Using suggested changes, replace this line with:

docBody.appendChild(f);

document.body.appendChild(document.createElement("div"));

Why not keep using f as above:

f = document.createElement("div");

f = document.createDocumentFragment();
Delete.


f.appendChild(document.createElement("table"));

var t = document.createElement('table');
var c; // Used below

for (var i=0; i<3; i++) {
e = document.createElement("tr");

When adding rows in IE, you must add them to a tbody element not the
table element. Simpler to use insertRow, so replace the above line with:

e = t.insertRow(i);
for (var j=0; j<2; ++j){

e.appendChild(document.createElement("td"));

c = document.createElement("td");
c.appendChild(document.createTextNode("C" + i + "," + j));
e.appendChild(c);
}
}
f.appendChild(t);
docBody.appendChild(f);


Untested, but should be OK... snooze time.

 

[Thomas 'PointedEars' Lahn]

I'm not sure that modifying the document title property is the same as
changing the content of the title element... too late for testing, I'll
leave that to you (or someone else).

Unfortunately, it is not the same in practice. But modifying the value of
the `nodeValue' property of the child text node does not have any effect on
display, only on the DOM tree (that did not change in Firefox 1.5). See a
previous discussion about it.

[...]
Mixing W3 DOM and non-standard innerHTML is not a good idea:

Ahhh (SCNR)


Regards,
PointedEars