动态创建DOM内容

我只是在玩一些Firefox扩展编程，并且遇到了一个问题。假设我想创建一种网格，每一行都包含很多元素。如果我想x行动态添加到面板上，我认为我有，要做到这一点：动态创建DOM内容

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，styles，...来格式化所有元素以获得良好的布局？

是否可以创建一个用户定义的.js对象，该对象包含按钮，标签和Whatever的元素信息; XUL文件与每个网格行再利用和做只有

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

建立网格少痛苦 - 然后一个相关联的“模板”。

它有意义还是我错了？ Regards， Alex

来源

2011-06-16 alex999

我还没有尝试过，虽然，怎么样在innerHTML的方式做这件事？ – shinkou 2011-06-17 00:00:13

@shinkou：糟糕的建议是，在扩展中使用innerHTML是安全漏洞的常见来源。 – 2011-06-22 09:02:46

@Wladimir，我自己不这样做，安全问题？怎么样？我想知道更多。谨慎阐述？ – shinkou 2011-06-23 04:59:54

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

来源

2011-06-17 00:00:03 MatrixFrog

如果你不想/不能使用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"; 
...

来源

2011-06-22 09:10:11

动态创建DOM内容

回答

相关问题