动态创建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对象，其中包含按钮、标签和其他内容的元素信息；然后关联一个“模板”-.xul文件，在每个网格行上重复使用，并仅进行

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

为了更轻松地构建网格。

这是否有意义或者我错了？ 问候， Alex

- alex999

---

我还没有尝试过，用innerHTML的方式行不行？ - shinkou

@shinkou：建议不好，扩展中使用innerHTML是安全漏洞的常见来源。 - Wladimir Palant

@Wladimir，我自己不这样做，是因为安全问题？怎么回事？我想了解更多。能详细说明一下吗？ - shinkou

@shinkou：当然。典型的代码看起来像这样：element.innerHTML = "<description>" + text + "</description>;"。如果 text 恰好是来自网页的内容，那么恶意网页可以提供类似于 <img src="dummy" onerror="alert('Malicious code here')"/> 的内容，现在它已经成功以您扩展程序的权限（也就是允许执行任何操作）运行了 JavaScript 代码。你可以转义 text 中的特殊字符，但这很复杂，而且容易忘记。另一方面，使用 DOM 方法本质上是安全的。 - Wladimir Palant

Answer 1

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

- Tyler

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";
...

- Wladimir Palant