| re: Problem dynamically writing html-- table not showing up
ezmiller wrote:[color=blue]
> 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.[/color]
f is unnecessary.
[color=blue]
> document.getElementsByTagName("head")[0].appendChild(document.createElement("title"));[/color]
If your page did not already have a title element, it was invalid HTML.
[color=blue]
> document.title = "Page Title";[/color]
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).
[color=blue]
>
> e = document.createElement("p");[/color]
Features that may not be supported by all browsers/UAs should be tested
before use.
[color=blue]
> e.setAttribute("id","p1");
> e.innerHTML = "Here is a short paragraph.";[/color]
Mixing W3 DOM and non-standard innerHTML is not a good idea:
e.appendChild(document.createTextNode('Here ...'));
[color=blue]
> document.body.appendChild(e);[/color]
Depending on your doctype and browser:
var docBody = document.body || document.documentElement;
docBody.appendChild(e);
may be safer.
[color=blue]
> f = document.createDocumentFragment();[/color]
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:
[color=blue]
> f.appendChild(document.createElement("ul"))[/color]
f = document.createElement('ul');
e = ...
[color=blue]
> e = document.createElement("li");
> e.appendChild(document.createTextNode("Item #1"));[/color]
A loop would be much simpler, I guess this is just a sample...
[color=blue]
> f.childNodes[0].appendChild(e);[/color]
If f is used as suggested above:
f.appendChild(e);
[color=blue]
> e = document.createElement("li");
> e.appendChild(document.createTextNode("Item #2"));
> f.childNodes[0].appendChild(e);[/color]
If f is used as suggested, replace this line with:
f.appendChild(e);
[color=blue]
> e = document.createElement("li");
> e.appendChild(document.createTextNode("Item #3"));
> f.childNodes[0].appendChild(e);[/color]
If f is used as suggested, replace this line with:
f.appendChild(e);
[color=blue]
> document.body.appendChild(f);[/color]
Using suggested changes, replace this line with:
docBody.appendChild(f);
[color=blue]
>
> document.body.appendChild(document.createElement(" div"));[/color]
Why not keep using f as above:
f = document.createElement("div");
[color=blue]
>
> f = document.createDocumentFragment();[/color]
Delete.
[color=blue]
> f.appendChild(document.createElement("table"));[/color]
var t = document.createElement('table');
var c; // Used below
[color=blue]
> for (var i=0; i<3; i++) {
> e = document.createElement("tr");[/color]
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){
[color=blue]
> e.appendChild(document.createElement("td"));[/color]
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.
--
Rob
| 
