Creating DOM content dynamically

Question

I'm just playing around with some Firefox extension programming and I came across a question. Let's say I want to create a kind of grid, each line consist of a lot of elements. If I want to add x rows to a panel dynamically, I assume I have to do it with that:

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

Isn't that a bit painful? Thinking about nested vbox, hbox, styles, ... for formatting all the elements to get a good layout?

Would it be possible to create a user defined .js object that consist of the element information for the button, the label and the Whatever; then associate a "template"-.xul file for reuse with every grid row and do only a

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

to build the grid less painfully.

Does it make sense or am i wrong? Regards, Alex

Answer 1

Yes, creating interfaces dynamically with DOM methods is kind of painful. You might want to use XBL instead.