Geek asks and answers

Dynamically creating DOM content

I just play with some Firefox extension programs and I came across a question. Let's say I want to create some kind of grid, each row consists of many elements. If I want to dynamically add x lines to the panel, I suppose I should do this with this:

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);
}

Doesn't it hurt? Thinking of nested vbox, hbox, styles, ... to format all the elements to get a good layout?

Is it possible to create a user-defined .js object, which consists of information about an element for a button, shortcut, and anything else; then link the file "template" -. xul for reuse with each grid line and only do

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

building a grid is less painful.

Does it make sense, or am I mistaken? Regards, Alex

+3
2

, DOM-, . XBL.

+1

, / XBL, node . node :

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

More articles:


All Articles