Fetz: Alternative für innerHTML bei td-Tags

Hallo!

Ich bin schon am Verzweifeln, weil es offensichtlich nicht möglich ist, einen Tag <td> per innerHTML dynamisch zu erzeugen..
Mein Quelltext sieht etwa so aus:

<html><head><title>Test</title>
<script language="javascript" type="text/javascript">
<!--
function newRow(){
 var main, newElement;
 main = document.getElementsByTagName('tr')[0];
if (main) {
    newElement = document.createElement('tr');
    newElement.innerHTML = '<td>Hallo</td><td>Ilia</td>';
    main.parentNode.insertBefore(newElement, main);
}
}
//-->
</script>
</head>
<body>
<table><tbody><tr><td>Hallo</td><td>Welt</td></tr></tbody></table>
<a href="#" onclick="newRow()">Test</a>
</body></html>

Löse ich jetz die Funktion newRow per Klick auf den Link aus, ändert sich die entscheidende Zeile in:

<table><tbody><tr>HalloIlia</tr><tr><td>Hallo</td><td>Welt</td></tr></tbody></table>

Ich muss, für das was ich vorhabe (Greasemonkey-Skript) ein neues Element <tr> erzeugen, damit das Seitenlayout nicht zerstört wird. Der Codeblock der eingefügt werden soll ist in wirklichkeit mehrere -zig Zeilen lang.
Gibt es andere Möglichkeiten?

Vorab vielen Dank für jegliche Art von Tipps.

Gruß, Fetz

  1. Hallo,

    Ich bin schon am Verzweifeln, weil es offensichtlich nicht möglich ist, einen Tag <td> per innerHTML dynamisch zu erzeugen.

    Warum verwendest du dann nicht einfach appendChild und createElement dafür?

    newElement.innerHTML = '<td>Hallo</td><td>Ilia</td>';

    Was spricht denn gegen:

    var zellen = new Array("Hallo","Ilia");  
    for (var i = 0; i < zellen.length; i++){  
     newElement.appendChild(document.createElement("td")).appendChild(document.createTextNode(zellen[i]));  
    }
    

    ?

    mfg. Daniel

    1. Hallo zusammen,

      erstmal ganz herzlichen Dank für Eure Hilfe!! Hat mir weitergeholfen.
      Ich habe jetzt den Weg genommen, dass ich mir die Tabellenstruktur über newrow und newcell erzeugt habe. Erst dann habe ich die größeren Quelltextabschnitte mit innerHTML jeweils in die Spalten geschoben.

      Liebe Grüße,

      Fetz

  2. Hello out there!

    Mein Quelltext sieht etwa so aus:
    <html><head><title>Test</title>

    Fehlender DOCTYPE wegen „in etwa“?

    <script language="javascript" type="text/javascript">
    <!--

    Wozu das 'language'-Attribut? Wozu die Auskommentierung?

    newElement = document.createElement('tr');
        newElement.innerHTML = '<td>Hallo</td><td>Ilia</td>';
        main.parentNode.insertBefore(newElement, main);

    Offensichtlicht wirkt 'innerHTML' nur auf bereits im Elementbaum vorhandene Objekte. Vertausch die letzen beiden Zeilen, und es funzt[tm].

    <a href="#" onclick="newRow()">Test</a>

    Warum soll ohne JavaScript an den Seitenanfang gesprungen werden?

    Links führen zu anderen Ressourcen; für Aktionen auf einer Seite sind Buttons passend.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. hi,

      newElement = document.createElement('tr');
          newElement.innerHTML = '<td>Hallo</td><td>Ilia</td>';
          main.parentNode.insertBefore(newElement, main);

      Offensichtlicht wirkt 'innerHTML' nur auf bereits im Elementbaum vorhandene Objekte. Vertausch die letzen beiden Zeilen, und es funzt[tm].

      "Funzigkeit" hast du wo getestet? FF, Opera, ...?

      Im IE jedenfalls ist innerHTML u.a. für TR als readonly definiert.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
  3. Hallo Fetz

    Gibt es andere Möglichkeiten?

    Vorab vielen Dank für jegliche Art von Tipps.

    Hast du es mal mit insertRow(), insertCell(), createTextNode() und appendChild() probiert?

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!