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.g etElementsByTag Name... )

var e;
var f; // Will hold a document fragment.
document.getEle mentsByTagName( "head")[0].appendChild(do cument.createEl ement("title")) ;
document.title = "Page Title";

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

f = document.create DocumentFragmen t();
f.appendChild(d ocument.createE lement("ul"))
e = document.create Element("li");
e.appendChild(d ocument.createT extNode("Item #1"));
f.childNodes[0].appendChild(e) ;
e = document.create Element("li");
e.appendChild(d ocument.createT extNode("Item #2"));
f.childNodes[0].appendChild(e) ;
e = document.create Element("li");
e.appendChild(d ocument.createT extNode("Item #3"));
f.childNodes[0].appendChild(e) ;
document.body.a ppendChild(f);

document.body.a ppendChild(docu ment.createElem ent("div"));

f = document.create DocumentFragmen t();
f.appendChild(d ocument.createE lement("table") );
for (var i=0; i<3; i++) {
e = document.create Element("tr");
e.appendChild(d ocument.createE lement("td"));
e.appendChild(d ocument.createE lement("td"));
e.getElementsBy TagName("td")[0].innerHtml =("C"+i+",0") ;
e.getElementsBy TagName("td")[1].innerHtml = ("C"+i+",1") ;
f.getElementsBy TagName("table" )[0].appendChild(e) ;
}
document.getEle mentsByTagName( "div")[0].appendChild(f) ;

[RobG]

ezmiller wrote:

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.g etElementsByTag Name... )

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

document.getEle mentsByTagName( "head")[0].appendChild(do cument.createEl ement("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.create Element("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(d ocument.createT extNode('Here ...'));

document.body.a ppendChild(e);
Depending on your doctype and browser:

var docBody = document.body || document.docume ntElement;
docBody.appendC hild(e);
may be safer.

f = document.create DocumentFragmen t();
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(d ocument.createE lement("ul"))
f = document.create Element('ul');
e = ...
e = document.create Element("li");
e.appendChild(d ocument.createT extNode("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.create Element("li");
e.appendChild(d ocument.createT extNode("Item #2"));
f.childNodes[0].appendChild(e) ;
If f is used as suggested, replace this line with:

f.appendChild(e );

e = document.create Element("li");
e.appendChild(d ocument.createT extNode("Item #3"));
f.childNodes[0].appendChild(e) ;
If f is used as suggested, replace this line with:

f.appendChild(e );

document.body.a ppendChild(f);
Using suggested changes, replace this line with:

docBody.appendC hild(f);


document.body.a ppendChild(docu ment.createElem ent("div"));
Why not keep using f as above:

f = document.create Element("div");


f = document.create DocumentFragmen t();
Delete.

f.appendChild(d ocument.createE lement("table") );
var t = document.create Element('table' );
var c; // Used below

for (var i=0; i<3; i++) {
e = document.create Element("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(d ocument.createE lement("td"));

c = document.create Element("td");
c.appendChild(d ocument.createT extNode("C" + i + "," + j));
e.appendChild(c );
}
}
f.appendChild(t );
docBody.appendC hild(f);
Untested, but should be OK... snooze time.

--
Rob

[Thomas 'PointedEars' Lahn]

RobG wrote:

ezmiller wrote:

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).

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