Problem dynamically writing html-- table not showing up

Discussion in 'Javascript' started by ezmiller, Dec 15, 2005.

  1. ezmiller

    ezmiller Guest

    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);
     
    ezmiller, Dec 15, 2005
    #1
    1. Advertisements

  2. ezmiller

    RobG Guest

    f is unnecessary.

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

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

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

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

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

    Depending on your doctype and browser:

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


    may be safer.

    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 = document.createElement('ul');
    e = ...
    A loop would be much simpler, I guess this is just a sample...

    If f is used as suggested above:

    f.appendChild(e);

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

    f.appendChild(e);

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

    f.appendChild(e);

    Using suggested changes, replace this line with:

    docBody.appendChild(f);

    Why not keep using f as above:

    f = document.createElement("div");

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

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

    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.
     
    RobG, Dec 15, 2005
    #2
    1. Advertisements

  3. 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.
    Ahhh :) (SCNR)


    Regards,
    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 15, 2005
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.