Probleme mit innerHTML

[Markus H.]

Hallo,

heute morgen schon ein paar Probleme mit JS gehabt und nun mit innerHTML...

document.getElementById(varKat).innerHTML  = '<table border="2"><colgroup> <col width="300"><col width="590"></colgroup>';
   for (var i = 0; i < recCount; i++)
    {

if (Linksammlung[i][3] == varKat)
      {
       document.getElementById(varKat).innerHTML = document.getElementById(varKat).innerHTML + '<tr><td><img style="text-align:left; margin-left:0.5cm;" src="img/iconInfo.gif"><a href="' + Linksammlung[i][1] + '" target="_blank" >' + Linksammlung[i][0] + '</td><td>' + Linksammlung[i][2] + '</td></tr><br>';
         }

Wie man sehen kann füge ich vor der For-Schleife einen Tabellen Code in das Objekt ein. Nachher soll dieser Code + dem neuen Code darin stehen. Allerdings interpretiert der Browser so die Table Anweisung und Co. nicht. Füge ich die erste innerHTML Zeile vor die zweite, quasi erstelle ich dann immer eine neue Table, dann funktioniert es.
Aber da ich aus diesem Array mehrere Werte raushole und nur eine neue Zeile und keine neue Tabelle anlegen möchte, ist dies keine Lösung für mich.

Kann jemand helfen?

Danke Markus

[Gernot Back]

Hallo Markus,

Kann jemand helfen?

Nutze, wenn du inerhalb eines Elements weitere Elemente und nicht nur Text einfügen willst, das Node-Objekt in Verbindung mit document.createElement().

Gruß Gernot

[Markus H.]

Hallo Markus,

Kann jemand helfen?

Nutze, wenn du inerhalb eines Elements weitere Elemente und nicht nur Text einfügen willst, das Node-Objekt in Verbindung mit document.createElement().

Gruß Gernot

Mhh hab mir das eben angeschaut - kannst du mir einmal ein spezielles Beispiel für meinen Fall machen? Denn ganz verstehen tue ich das leider nicht.
Wäre dir sehr dankbar!

Grüße Markus

[Gernot Back]

Hallo Markus,

Nutze, wenn du inerhalb eines Elements weitere Elemente und nicht nur Text einfügen willst, das Node-Objekt in Verbindung mit document.createElement().

Mhh hab mir das eben angeschaut - kannst du mir einmal ein spezielles Beispiel für meinen Fall machen? Denn ganz verstehen tue ich das leider nicht.

Ungetestet, weil ich ja dein zweidimensionales Array "Linksammlung" nicht kenne:

  
function tabelleEinfuegen() {  
   var myTable = document.createElement('TABLE');  
   myTable.className = 'alternatingRows';  
   var myColgroup = document.createElement('COLGROUP');  
   var myFirstCol = document.createElement('COL');  
   myFirstCol.width = '300';  
   var mySecondCol = document.createElement('COL');  
   mySecondCol.width = '590';  
   myColgroup.appendChild(myFirstCol);  
   myColgroup.appendChild(mySecondCol);  
   var myTbody = document.createElement('TBODY');  
   for (i=0; i< Linksammlung.length; i++) {  
       var myCurrentRow = document.createElement('TR');  
       var myFirstCell = document.createElement('TD');  
       var myFirstCellIcon = document.createElement('IMG');  
       myFirstCellIcon.src = "img/iconInfo.gif";  
       var myFirstCellLink = document.createElement('A');  
       myFirstCellLink.href = Linksammlung[i][1];  
       myFirstCellLink.target = "_blank";  
       myFirstCellLink.innerHTML = Linksammlung[i][0];  
       var mySecondCell = document.createElement('TD');  
       mySecondCell.innerHTML =Linksammlung[i][2];  
       myFirstCell.appendChild(myFirstCellIcon);  
       myFirstCell.appendChild(myFirstCellLink);  
       myCurrentRow.appendChild(myFirstCell);  
       myCurrentRow.appendChild(mySecondCell);  
       myTbody.appendChild(myCurrentRow);  
   }  
   myTable.appendChild(myColgroup);  
   myTable.appendChild(myTbody);  
   document.getElementById('varKat').appendChild(myTable);  
}  
  

Gruß Gernot

[Maxx]

Hallo Markus,

Allerdings interpretiert der Browser so die Table Anweisung und Co. nicht.

so ganz kann ich deiner Fehlerbeschreibung nicht folgen

Füge ich die erste innerHTML Zeile vor die zweite, quasi erstelle ich dann immer eine neue Table, dann funktioniert es.

Ist das dein gesamter Code? Ein innerHTML += "</table>" hast du schon irgendwo zum Schluss, oder?

Grüße,

Jochen

[Markus H.]

Ist das dein gesamter Code? Ein innerHTML += "</table>" hast du schon irgendwo zum Schluss, oder?

Neee ist nicht der ganze Code - nur der wesentliche Teil.
Jepp ein </table> ist natürlich vorhanden.

Wie gesagt das ganze geht auch wenn ich alles als ein Element in das Objekt schreibe..

Trotzdem schon einmal Danke!

[Maxx]

Hallo Markus,

Neee ist nicht der ganze Code - nur der wesentliche Teil.
Jepp ein </table> ist natürlich vorhanden.

ok, Hast du einen Firefox zum testen?
Wenn ja: selektiere die nicht interpretierte? "Table Anweisung und Co." und wähle aus dem Kontextmenü "Auswahl-Quelltext anzeigen" Prüfe, ob die von dir erzeugte Tabelle valides HTML ist.

Wenn nein: baue nach dem Erzeugen der Tabelle ein alert(document.getElementById(varKat).innerHTML); ein. Prüfe (siehe oben)

Grüße,

Jochen

[D.R.]

Hallo,

ok, Hast du einen Firefox zum testen?
Wenn ja: selektiere die nicht interpretierte? "Table Anweisung und Co." und wähle aus dem Kontextmenü "Auswahl-Quelltext anzeigen" Prüfe, ob die von dir erzeugte Tabelle valides HTML ist.

Das dürfte nicht gehen, weil innerHTML-Code vor dem Einfügen erstmal in DOM-Objekte umgewandelt wird.

Der generierte Quelltext ist demzufolge lediglich eine RE-Konvertierung des DOM, welche eigentlich immer gültiges HTML ergeben sollte…

mfg. Daniel

[Maxx]

Hallo Daniel,

Der generierte Quelltext ist demzufolge lediglich eine RE-Konvertierung des DOM, welche eigentlich immer gültiges HTML ergeben sollte…

stimmt, so hatte ich das nicht bedacht. Mein Opera zeigt im alert() allerdings den "falschen" Quelltext.

Grüße,

Jochen

[D.R.]

Hallo,

Der generierte Quelltext ist demzufolge lediglich eine RE-Konvertierung des DOM, welche eigentlich immer gültiges HTML ergeben sollte…

stimmt, so hatte ich das nicht bedacht. Mein Opera zeigt im alert() allerdings den "falschen" Quelltext.

Gibt das alert den originalen HTML-String oder das innerHTML aus?

mfg. Daniel

[Maxx]

Hallo Daniel,

stimmt, so hatte ich das nicht bedacht. Mein Opera zeigt im alert() allerdings den "falschen" Quelltext.

Gibt das alert den originalen HTML-String oder das innerHTML aus?

weder noch, ein:

document.getElementById("foo").innerHTML = "<table><td><tr>bar</td></tr>blah"  
alert(document.getElementById("foo").innerHTML);

ergibt im Opera: <TABLE><TBODY><TR><TD><TR>bar</TR>blah
der Firefox macht daraus valides html:
<table><tbody><tr><td></td></tr><tr>bar</tr>blah</tbody></table>

Grüße,

Jochen

[D.R.]

Hallo,

stimmt, so hatte ich das nicht bedacht. Mein Opera zeigt im alert() allerdings den "falschen" Quelltext.

Gibt das alert den originalen HTML-String oder das innerHTML aus?

weder noch, ein:

document.getElementById("foo").innerHTML = "<table><td><tr>bar</td></tr>blah"

alert(document.getElementById("foo").innerHTML);

>   
> ergibt im Opera: <TABLE><TBODY><TR><TD><TR>bar</TR>blah  
  
Hm, dann speichert Opera die innerHTML Eigenschaft also…  
  

> der Firefox macht daraus valides html:  
> <table><tbody><tr><td></td></tr><tr>bar</tr>blah</tbody></table>  
  
…während Firefox sie verwirft und bei Abfrage neu generiert.  
  
Was passiert eigentlich, wenn du zwischendurch mit den DOM-Methoden etwas veränderst?  
  
Mich würde mal interessieren, was Opera aus:  
  
~~~javascript
document.getElementById("foo").innerHTML = "<table><td><tr>bar</td></tr>blah";  
document.getElementById("foo").getElementsByTagName("tr").appendChild(document.createElement("td")).appendChild(document.createTextNode("Zelle_2"));  
alert(document.getElementById("foo").innerHTML);

…macht.

mfg. Daniel

[MudGuard]

Hi,

[code lang=javascript]document.getElementById("foo").innerHTML = "<table><td><tr>bar</td></tr>blah"
der Firefox macht daraus valides html:
<table><tbody><tr><td></td></tr><tr>bar</tr>blah</tbody></table>

Wie kommst Du auf die Idee, daß das valide wäre? Text als direktes Kind von tbody ist nicht valide.

cu,
Andreas

[Cybaer]

Hi,

heute morgen schon ein paar Probleme mit JS gehabt und nun mit innerHTML...

Du solltst vielleicht die Doku vom innerHTML-Erfinder MS lesen. Dort steht, daß innerHTML innerhalb von TABLE nur lesend, nicht aber schreibend zu verwenden ist.

Auch ist es wenig sinnvoll, mit innerHTML nur Teil-Code einzufügen. Es heißt ja nicht startHTML oder insertStartTags ... =;-)

Also erstmal alles in einen String, und dann die komplette Tabelle die im String ist, mit innerHTML einfügen.

Gruß, Cybaer

[MudGuard]

Hi,

'</td></tr><br>';

Das ist natürlich kompletter Unfug.

cu,
Andreas