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

JQuery - это легковесная библиотека, которая делает все, что вы хотите там делать, и гарантирует кросс-браузерную совместимость.

Answer 3

Ужасная вещь, которую я вижу, - это установка атрибутов без использования setAttribute ()

Если вы хотите иметь своего рода фрагменты, это можно сделать без использования innerHTML, вы уже используете нужный метод внутри вашегоcode.

Простой пример создания таблицы за 1 шаг:

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