Создание содержимого DOM динамически - PullRequest
Новая
       1

Создание содержимого DOM динамически

3 голосов
/ 17 июня 2011

Я просто поигрался с программированием расширений 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, styles, ... для форматирования всех элементов, чтобы получить хороший макет?

Можно ли создать определяемый пользователем объект .js, который состоит из информации об элементе для кнопки?, этикетка и все остальное;затем свяжите файл "template" - .xul для повторного использования с каждой строкой сетки и сделайте только 

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

, чтобы построить сетку менее болезненно.

Имеет ли это смысл или я ошибаюсь?С уважением, Алекс

Ответы [ 2 ]

1 голос
/ 22 июня 2011

В тех случаях, когда вы не хотите / не можете использовать 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";
...
1 голос
/ 17 июня 2011

Да, динамически создавать интерфейсы с помощью методов DOM довольно болезненно. Вы можете вместо этого использовать XBL .

...