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的元素信息组成;然后将“模板” - .xul文件关联到每个网格行并仅执行

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

不那么痛苦地构建网格。

它有意义还是我错了？问候，亚历

Answer 1

是的，使用DOM方法动态创建接口有点痛苦。您可能希望改为使用XBL。

Answer 2

如果您不想/不能使用XBL，您还可以使用模板节点并克隆它。我的文档中通常有一个节点如下：

<hbox id="rowTemplate" hidden="true">
  <button class="hiButton" label="Hi!"/>
  <description class="explanation"/>
  ...
</hbox>

我创建了这样的实际行：

var container = document.getElementById("rowTemplate").cloneNode(true);
container.removeAttribute("id");
container.removeAttribute("hidden");
container.getElementsByClassName("hiButton")[0].setAttribute("foo", "bar");
container.getElementsByClassName("explanation")[0].textContent = "Try this";
...

动态创建DOM内容

2 个答案: