By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,932 Members | 1,291 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,932 IT Pros & Developers. It's quick & easy.

Problem dynamically writing html-- table not showing up

P: n/a
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);

Dec 15 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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.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.

--
Rob
Dec 15 '05 #2

P: n/a
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
Dec 15 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.