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完成后，你已经在使用所需的方法在你的代码里面。

，在1步创建一个表中的一个简单的例子：

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

Answer 3

JQuery是一个轻量级库，做所有的你想在那里做什么，它保证了跨浏览器兼容。