Javascript, DOM crazyness...

First of all, please excuse me as I am a bit new to this so my code does not look pretty... but everything below works, ## this is not a thread asking for help with non working code ##.

Now that thats out of the way... here's the thing: I have made an addon for FF but the addon editor told me it would be rejected as I was using innerHTML... so to change that using appendChild etc, and thats what I did below.

The thing is, it looks ugly and feels really complicated so I was wondering if I used the right approach or is there an easier way of doing this?

var th开发者_StackOverflow社区e_table_color,alt_link,link_for_deletion,comment =null;


    var xmlDoc=null;
    var parser = new DOMParser();
    xmlDoc = parser.parseFromString(data, "text/xml");


var nodes = xmlDoc.getElementsByTagName("unblocker_details");  
var t  = document.createElement("table"),
    td = document.createElement("td"),
    tr = document.createElement("tr");
var a       = document.createElement("a"),
    strong  = document.createElement("strong");

    t.style.width = "80%"; // Table attributes
    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");
  var 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");


    // TR1, TD1
    td="";  td = document.createElement("td");
    tr=""; tr = document.createElement("tr");

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

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

    strong="";
    strong  = document.createElement("strong");
    strong.appendChild(document.createTextNode(the_type));
    td.appendChild(strong);

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

            //TD2
            td="";  td = document.createElement("td");
            td.width="70%";
            td.vAlign="top";

            a="";a = document.createElement("a");
            a.href= alt_link;
            a.appendChild(document.createTextNode(alt_link));
            a.target=   "_blank";
            td.appendChild(a);
        tr.appendChild(td);

                    //TD3
                    td="";  td = document.createElement("td");
                    td.noWrap="NOWRAP";
                    td.align="center";
                    td.vAlign="middle";
                    td.width="14%";

                    a="";a = document.createElement("a");
                    a.href= "javascript:dead_link('"+link_for_deletion+"')";
                    a.appendChild(document.createTextNode("Dead link?"));
                    td.appendChild(a);
                tr.appendChild(td);
                t.appendChild(tr);

                            // TR2, TD1 (or TD4 in total)
                            tr="";  tr = document.createElement("tr");
                            tr.bgColor=the_table_color;


                            td="";  td = document.createElement("td");
                            td.vAlign="top";
                            td.appendChild(document.createTextNode("Comment:"));
                            tr.appendChild(td);

                            td="";  td = document.createElement("td");
                            td.colSpan="2";
                            td.appendChild(document.createTextNode(comment));
                        tr.appendChild(td);
                        t.appendChild(tr);
}// End of for() loop
//alert(t.innerHTML);


    document.getElementById("wait").textContent="";
    document.getElementById("wait").appendChild (t);

If you don't want to pull in a giant library to do simple stuff you can simply alias the functions:

// aliasing
var el = document.createElement;

// not really aliasing, but I didn't want to modify the prototypes of html elements
function attr(el, attr, value) {
    el.setAttribute(attr, value);
}

Changes your code to look something like this:

var td = el('td');
attr(td, 'width', '100%');

Though with jQuery this would look like this:

var td = $('<td>');
td.attr('width', '100%');

Though I'm usually stingy and write a wrapper around jQuery (especially for divs) that tends to look like this:

function div(className) {
    if(className) {
        return $('<div>', {'class': className});
    }
    return $('<div>');
}

The ugly thing I see is the setting of attributes without using setAttribute()

If you like to have a kind of snippets, this can be done without using innerHTML, you already use the needed method inside your code.

An simple example that creates a table in 1 step:

var table = parser.parseFromString('<table>'+
                                   '<tr><td>table created without innerHTML</td></tr>'+
                                   '</table>', 
                                   'text/xml').documentElement;

JQuery is a lightweight library that does all of what you wish to do in there, and it guarantees cross browser compatibility.