innerHTML o modificare il DOM?

[Gianluigi83]

ciao a tutti...ho una domanda da porvi..
secondo voi cos'è meglio:
- costruirsi una stringa tipo : <td><tr>........
................</td></tr> e poi innestrala con innerHTML oppure ricostruire il dom a partire da un punto con le varie funzioni tipo: createElement appenChild ecc ecc...
Grazie

[whisher]

innerHTML vs DOM

[Mich_]

Mi aggiungo a questo post, per una domanda simile.

Una volta (tanto tempo fa, ormai), avrei usato innerHTML senza problemi.
Ma poi ho sentito che innerHTML non e` valido secondo le regole moderne (del tipo HTML 1.0 Strict), in quanto modificherebbe degli oggetti interni alla pagina, cosa che non si dovrebbe fare.
Si dovrebbero distruggere e rigenerare gli oggetti.

Ho visto anche la pagina linkata, che dimostra come innerHTML e` circa tre volte piu` veloce del DOM (dipende dal browser).

Ma allora cosa si deve fare?

Sto facendo una paginetta HTML per provare dei form inviati con "get". Dato il tipo di progetto non c'e` server, per cui volevo verificare il form tramite HTML+JS.

Mi sono quindi costruito la stringa (che va a riempire completamente un <tbody>), e poi ho scritto:

function scriviTabella() {
  var stringa = leggiCampi();                    // questo ritorna la serie di <tr><td>...</td><td>...</td></tr>
  var ogg = document.getElementById('riempi');
  ogg.innerHTML = stringa;
}

La cosa funziona (sto testando su FF 1.5), ma quanto e` affidabile?
Ci sono browser in cui potrebbe non funzionare?
Come si potrebbe/dovrebbe fare?

Grazie

[Mega69]

Ci sono casi in cui innerHTML potrebbe non funzionare. Vedi questo ad esempio: http://www.quirksmode.org/dom/tests/innerhtmltest.xhtml
Bisogna poi dire che persino lo stesso IE può avere dei comportamenti strani.

Di sicuro utilizzare il dom è più sicuro.
Se vuoi intraprendere la strada del dom ricordati inoltre di usare il più possibile cloneNode al posto di createElement.

[whisher]

Originariamente inviato da Mega69

Se vuoi intraprendere la strada del dom ricordati inoltre di usare il più possibile cloneNode al posto di createElement.

aggiungo xchè ci ho picchiato il muso
che con cloneNode gli eventi non si clonano.
Quindi se su un elemento hai degli eventi
quando usi cloneNode nel nodo clone gli eventi
non ci stanno

[Mich_]

Anzitutto grazie per le vostre risposte.
Purtroppo non tutto mi e` chiaro. Sono alcuni anni che non uso piu` JS (non serve piu` per i siti statici, ora che molte cose si possono fare con i CSS) e non so come usare createElement e cloneNode.
C'e` un posto dove documentarsi (possibilmente semplice e con esempi)?

Oppure provo a fare una domanda piu` diretta (se e` possibile una risposta semplice):
Come faccio ad inserire in una tabella tutta una serie di righe? (a sostituzione del innerHTML nel codice sopra?

In pratica ho una tabella, che e` statica nella parte nera, e che va completata dinamicamente con il pezzo in rosso:

<table>
  <thead>
    <tr>
      <td>Nome campo</td>
      <td>Valore</td>
    </tr>
  </thead>
  <tbody id="riempi">
    & nbsp ;
    <tr>
      <td>codice</td>
      <td>78%tr</td>
    </tr>
    <tr>
      <td>cognome</td>
      <td>pallino</td>
    </tr>
     <tr>
      <td>nome</td>
      <td>pinco</td>
    </tr>
    ....   
  </tbody>
</table>

[Xinod]

puoi leggere questa pagina della guida al DOM che ti chiarira' molti dubbi
http://javascript.html.it/guide/lezi...del-documento/

ti faccio un esempio con una riga

var oTb=document.getElementById('riempi');

// crea
var oTr=document.createElement("TR");
var oTd1=document.createElement("TD");
var oTd2=document.createElement("TD");
var oTxt1=document.createTextNode("nome");
var oTxt2=document.createTextNode("Pallino");

// e appendi
oTd1.appendChild(oTxt1);
oTd2.appendChild(oTxt2);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
oTb.appendChild(oTr);

[Mich_]

Grazie mille Xinod.

Credo di aver capito.
Prima occorre creare gli elementi e i pezzi di testo (separatamente) poi appenderli all'interno dell'elemento padre.

A prima vista e` una cosa un po' macchinosa, soprattutto nel confronto dell'innerHTML, dove viene semplicemente scritto il codice in formato text/html e inserito al suo posto; suppongo che pero` ci siano dei buoni motivi per questo.

Lo implemento appena ho un po' di tempo.

[Mega69]

X Mich: quando non mi ricordo il funzionamento di una funzione javascript cerco su google
mdc nomefunzione
La guida del sito di mozilla è probabilmente una delle più complete e di facile fruizione
X whisher: si può risolvere con un for-in ( tranne in safari )

[whisher]

Originariamente inviato da Mega69
X whisher: si può risolvere con un for-in ( tranne in safari )

In che senso per quel che mi risulta se cloni un nodo
gli eventi associati non esistono +