[JS] innerHTML - dynamicznie tworzone tabele

Ostatnio napisałem skrypt, który tworzył tabelę w warstwie (FF1.0.3, IE6.0). W każdym kroku pętli, do warstwa.innerHTML dopisywany był kolejny wiersz tabelki. Wcześniej oczywiście zawartość wartstwy była czyszczona. I okazało się, że taki zapis nie działa... Rozwiązanie problemu okazało się trywialne: całą konstrukcję tabeli zapisujemy do jakiejś zmiennej, a następnie JEDNORAZOWO przypisujemy do warstwa.innerHTML zawartość tej zmiennej. Problem rozwiązany. jednak mam pytanie: Dlaczego tak się dzieje? Dla przykładu dwa fragmenty kodu, które u mnie dają całkiem inne wyniki (pierwszy jest błędny, drugi poprawny):

warstwa.innerHTML='<table border="1"><tr><td>XXX</td>';
warstwa.innerHTML+='<td>YYY</td></tr></table>';

z='<table border="1"><tr><td>XXX</td>';
z+='<td>YYY</td></tr></table>';
warstwa.innerHTML=z;

Zacznijmy od tego ze innerHTML jest nie zgodne ze standardami, wymyślił to MS a inne przeglądarki podchwyciły jednak teraz, kiedy mamy stworzone do tego funkcje DOM można już zapomnieć o tej niezbyt poręcznej właściwości.

Jeżeli chodzi o to, dlaczego tak się dzieje to chyba logiczne. Pierwsza część tego kodu jest niepoprawna, bo brakuje znacznika zamykającego tabelę. Dopiero, gdy połączysz go z drugą częścią jest poprawny i przeglądarka może dynamicznie stworzyć odpowiednie elementy na stronie.

Dlatego między innymi ta właściwość jest niezręczna i radzę korzystać funkcji Domu. W XHTML już jej nie ma, więc lepiej zawczasu nauczyć się nowocześniejszych sposobów.

[dopisane]

to będzie wyglądać tak:

<script>

  function nE(parent, tagName) {
    var elm = document.createElement(tagName);
    parent.appendChild(elm);
    return elm;
  }

  function nT(parent, text) {
    with (parent) { 
      while (hasChildNodes()) removeChild(lastChild);
    }
    parent.appendChild(document.createTextNode(text)); 
  }

  onload = function() {
    var container = document.getElementById('container');
    var table = nE(container, 'table');
    table.setAttribute('border', '1');
    var tr = nE(nE(table, 'tbody'), 'tr');
    nT(nE(tr, 'td'), 'XXX');
    nT(nE(tr, 'td'), 'YYY');
  }

</script>
<div id="container"></div>