Javascript、DOM crazyness ...

Question

まず最初に私はこれに少し慣れていますので、私のコードはきれいに見えません...しかし、以下のすべての作品は、##これは尋ねるスレッドではありません非作業コード##の助けを借りてください。
これはちょっと面白いことです：私はFF用のアドオンを作っていますが、アドオンエディタはinnerHTMLを使っているので拒否されると言っていました。それは私が下で行ったものです。

問題は、醜いように見えて、実際に複雑に感じるので、適切なアプローチを使用したのか、それとも簡単な方法があるのだろうかと疑問に思っていましたか？

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

私はたいていラッピングをしていますが、

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は、あなたがそこに行いたいもののすべてを行い、軽量ライブラリです、そしてそれは、クロスブラウザの互換性を保証しています。