Javascript，DOM 疯狂......

Question

首先，请原谅，因为我对这个有点陌生，所以我的代码看起来不太漂亮......但下面的一切都有效，## 这不是一个寻求非工作代码帮助的线程##.
现在那已经不碍事了……事情是这样的:我已经为 FF 制作了一个插件，但是插件编辑器告诉我它会被拒绝，因为我使用的是 innerHTML……所以要使用 appendChild 等来改变它，就是这样我在下面做了。

问题是，它看起来很难看，而且感觉真的很复杂，所以我想知道我是否使用了正确的方法，或者是否有更简单的方法？

var the_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);

Answer 1

如果你不想引入一个巨大的库来做简单的事情，你可以简单地为函数起个别名:

// 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);
}

将您的代码更改为如下所示:

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

虽然使用 jQuery 这看起来像这样:

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

虽然我通常很吝啬并围绕 jQuery(尤其是 div)编写一个包装器，它看起来像这样:

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