Utilizzate Builder per creare facilmente gli elementi del DOM in modo dinamico.

disponibilità

scritp.aculo.us V1.5 e seguenti.

synopsis

Builder.node( elementName )
Builder.node( elementName, attributes )
Builder.node( elementName, children )
Builder.node( elementName, attributes, children )

stringa elementName Il nome del tag per l'elemento.
oggetto attributes Attributi tipici sono id, className, style, onclick, ecc.
array children Lista degli altri nodi da allegare come figli.

Se un elemento dell'array children è un testo semplice o numerico, sarà automaticamente annesso come codice di testo.

Invece di un array, children può anche essere una stringa JavaScript o un numerico per facilitarne l'uso.

Quando specificate l'attributo di classe per il node, usate className per evitare un bug di Firefox.

Nota: questo non può essere usato per creare elementi TR o TD. Per creare elementi TR o TD dovete procedere in questo modo:

table = Builder.node('table', {width:'100%',cellpadding:'2',cellspacing:'0',border:'0'});
  tbody = Builder.node('tbody');
  tr = Builder.node('tr',{className:'header'});
  td = Builder.node('td',[ Builder.node('strong','Category')]);

  tr.appendChild(td);
  tbody.appendChild(tr);
  table.appendChild(tbody);

  $('divCat').appendChild(table);

Potete anche combinarli ma avete bisogno di assicurarvi che state creando il tag tbody o non funzionerà in IE. Ho testato questo in FF 1.5 e IE 6. Non ho accesso ad altri browser. L'unico problema che ho trovato è che con gli elementi TR e TD non potete inserire un tag di stile su di essi poichè blocca IE avviando la funzione Buider.

esempio semplice

 element = Builder.node('p',{className:'error'},'An error has occurred');

crea il seguente elemento:

<p class="error">An error has occured</p>

esempio complesso

 element = Builder.node('div',{id:'ghosttrain'},[
    Builder.node('div',{className:'controls',style:'font-size:11px'},[
      Builder.node('h1','Ghost Train'),
      "testtext", 2, 3, 4,
      Builder.node('ul',[
        Builder.node('li',{className:'active', onclick:'test()'},'Record')
      ]),
    ]),
  ]);

crea (senza newline):

<div id="ghosttrain">
  <div class="controls" style="font-size:11px">
    <h1>Ghost Train</h1>
    testtext234
    <ul>
      <li class="active" onclick="test()">Record</li>
    </ul>
  </div>
</div>

utilizzo

Nel codice javascript, se volete usare il vostro nuovo elemento, potete aggiungerlo a un elemento esistente del dom chiamando

$('myExistingDomElement').appendChild(element);

tag: stub, Utils