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是一個輕量級庫，做所有的你想在那裏做什麼，它保證了跨瀏覽器兼容。