javascript - 动态创建 DOM 内容

Question

我只是在玩一些 Firefox 扩展程序，我遇到了一个问题。假设我想创建一种网格，每行包含很多元素。 如果我想动态地将 x 行添加到面板，我认为我必须这样做:

for(var i=0; i<x; i++) {
   tempButton = document.createElement("button");
   tempLabel = document.createElement("label");
   tempWhatever = document.createElement("button");
   ...
   tempButton.setAttribute("label", "YippeYeah");
   ...
   container.appendChild(tempButton);
   container.appendChild(tempLabel);
   container.appendChild(tempWhatever);
}

是不是有点痛？考虑嵌套的 vbox、hbox、样式...来格式化所有元素以获得良好的布局？

是否可以创建一个用户定义的 .js 对象，其中包含按钮、标签和 Whatever 的元素信息？然后关联一个"template"-.xul 文件以便与每个网格行重用，并且只做一个

for(var i=0; i<x; i++) {
   container.appendChild(myObjArray[i]);
}

减少构建网格的痛苦。

这有意义还是我错了？ 问候， 亚历克斯

Answer 1

是的，使用 DOM 方法动态创建接口(interface)有点痛苦。您可能想使用 XBL相反。