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

Answer 2

我看到的丑陋的事情是不使用setAttribute（）

设置属性

如果您想要一种片段，可以在不使用innerHTML的情况下完成，您已经在代码中使用了所需的方法。

一步创建表的简单示例：

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

Answer 3

JQuery是一个轻量级的库，可以完成您希望在其中执行的所有操作，并且可以保证跨浏览器的兼容性。