首先,请原谅,因为我对这个有点陌生,所以我的代码看起来不太漂亮......但下面的一切都有效,## 这不是一个寻求非工作代码帮助的线程##.
现在那已经不碍事了……事情是这样的:我已经为 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);
最佳答案
如果你不想引入一个巨大的库来做简单的事情,你可以简单地为函数起个别名:
// 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>');
}
关于Javascript,DOM 疯狂......,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6886394/