Javascript：DOM，appendChild - 几个问题

Question

I am just learning this stuff so please forgive if my code or questions are very basic.

My "working code" (no errors etc) just so you know what I have so far:

var t = document.createElement("table"),
    tr = document.createElement("tr"),
    tr2 = document.createElement("tr"),
    td = document.createElement("td"),
    td2 = document.createElement("td"),
    a = document.createElement("a"),
    strong = document.createElement("strong");

t.style.width = "80%";
t.style.border = "0";
t.cellspacing = "2";
t.cellpadding = "2";

.

for (var i = 0; i < nodes.length; i++) {
    the_table_color = nodes[i].getAttribute("table_color");
    the_type = nodes[i].getAttribute("type");
    alt_link = nodes[i].getAttribute("alt_link");
    link_for_deletion = nodes[i].getAttribute("link_for_deletion");
    comment = nodes[i].getAttribute("comment");

    tr.bgColor = the_table_color;
    t.appendChild(tr);

    td.width = "16%";
    td.vAlign = "top";
    tr.appendChild(td);

    strong.appendChild(document.createTextNode(the_type));
    td.appendChild(strong);

    td.width = "16%";
    td.vAlign = "top";
    tr.appendChild(td);

    td2.width = "70%";
    td2.vAlign = "top";
    tr.appendChild(td2);

    a.href = alt_link;
    a.appendChild(document.createTextNode(alt_link));
    a.target = "_blank";
    td2.appendChild(a);
}

As you can see from above I have this bit:

td = document.createElement("td"),
    td2 = document.createElement("td"),

and the reason for that is, if I do not have the "td" declared again, the first one gets overwritten and the second one does not display...
A) Is that the right way of doing this? (not sure if this is the right approach,I came about the solution of declaring another variable to get it to work, but it seems like extra code)

Then this line of code:

strong.appendChild(document.createTextNode(the_type));

just adds all the stuff from the loop in there :(
For example of the first iteration of the for() loop has abc and the second had def it displays abcdef instead of abc the first time and def the second.
B) Why is that and how do I fix it?

Thanks!

Answer 1

Your for loop is executing against the same instance with each iteration. You will not get multiple rows of data unless you perform your:

document.createElement("TR");
document.createElement("TD");

within the loop body. Otherwise, you're exactly right, you're just appending the same text to the same row and table cell each iteration through the loop.

It sounds like you need to change your approach to something like:

var table = document.createElement("TABLE");
for(var i = 0; i < nodes.length; i++){
    var tr = document.createElement("TR");
    var td = document.createElement("TD");
    tr.appendChild(td);
    table.appendChild(tr);

    // do something to to td    
}

Let me know if I've misunderstood your question, but if you're wondering why your table is building only one row or repeatedly modifying the same cell, that's definitely why... if there's more to your question let me know and I'll update the posting.

Happy coding.

B