Firefox & innerHTML - Tags verschwinden bei Zuweisung

[Raik]

Hallo,

ich möchte so etwas, wie ein template mit daten befüllen und dann als tabellenzeile in eine tabelle einfügen:
(firefox 1.5.0.4)

[code language="javascript"]
<script type="text/javascript">

var table = document.getElementById("datatable");
function NEW_ROW(recordset){
    var source = "<td> #nick#</td>"
                  +"<td> #level#</td>"
                  +"<td> #userid#</td>"
                  +"<td><img src=an_aus#on_off#.gif></td>";
    for (var index in recordset){
     var pattern = new RegExp("#"+index+"#","gi");
     source = source.replace(pattern, recordset[index]);
     }
 var row = document.createElement("tr");
        <!-- wenn ich hier mit alert den inhalt von source ausgeben lasse,sind die tabellenzellen noch drin -->
    row.innerHTML = source;
    <!-- und hier sind sie dann verschwunden -->
    table.appendChild(row);
    }

</script>
[/code]

wo liegt der fehler? das bild wird eigenartiger weise nicht gelöscht, das erscheint, wie gewollt.

freundl. Grüsse aus Berlin, Raik

[Raik]

  
<script type="text/javascript">  
  
var table = document.getElementById("datatable");  
function NEW_ROW(recordset){  
    var source = "<td> #nick#</td>"  
                  +"<td> #level#</td>"  
                  +"<td> #userid#</td>"  
                  +"<td><img src=an_aus#on_off#.gif></td>";  
    for (var index in recordset){  
     var pattern = new RegExp("#"+index+"#","gi");  
     source = source.replace(pattern, recordset[index]);  
     }  
 var row = document.createElement("tr");  
        <!-- wenn ich hier mit alert den inhalt von source ausgeben lasse,sind die tabellenzellen noch drin -->  
    row.innerHTML = source;  
    <!-- und hier sind sie dann verschwunden -->  
    table.appendChild(row);  
    }  
  
</script>  

[MudGuard]

Hi,

warum der Mischmasch aus innerHTML und createElement?
Erscheint mir unlogisch, die tr per createElement zu erzeugen, die td-Elemente aber per innerHTML.

+"<td><img src=an_aus#on_off#.gif></td>";

fehlende Anführungszeichen beim src-Attribut - vielleicht mag deswegen innerHTML nicht.
alt-Attribut fehlt komplett.

table.appendChild(row);

Daß das im IE nicht funktionieren kann, ist Dir bewußt? Der will nämlich noch das tbody-Element berücksichtigt wissen.

cu,
Andreas

[Raik]

Hallo, MudGuard!

warum der Mischmasch aus innerHTML und createElement?
Erscheint mir unlogisch, die tr per createElement zu erzeugen, die td-Elemente aber per innerHTML.

ich sprach davon, dass ich ein template parsen will. wie komplex soll eine funktion denn werden, die aus einem übergebenen werte-array anhand der werte erkennen soll, wieviele tabellenzellen zu erzeugen sind, welche daten evtl. gemeinsam in einer zelle stehen sollen, und  welche daten als parameter für ein bild oder einen link dienen sollen?
ich möchte, falls sich noch etwas an den datensätzen ändert, nicht immer wieder alle funktionen entsprechend anpassen müssen. deshalb auch die übergabe eines recordsets als array statt lauter einzelner variablen.

+"<td><img src=an_aus#on_off#.gif></td>";
fehlende Anführungszeichen beim src-Attribut - vielleicht mag deswegen innerHTML nicht.
alt-Attribut fehlt komplett.

und das fehler_hafte_ image-element verursacht, dass die fehler_freien_ tablellenzellen verschwinden(?), was ja garnicht die aufgabe von innerHTML wäre? auch etwas unlogisch, oder?

table.appendChild(row);

Daß das im IE nicht funktionieren kann, ist Dir bewußt? Der will nämlich noch das tbody-Element berücksichtigt wissen.

ich habe vom firefox geschrieben, nicht vom IE.
und der hängt laut dom-inspektor den textknoten aus den inhalten aller zellen sogar direkt an das tr-element an (weil er ja aus unerfindlichen gründen die vorhandenen td-elemente verschwinden lässt). :-O

  
    <table>  
        <tbody id="datatable">  
        </tbody>  
    </table>  

das ist die tabelle, in die das eingefügt werden soll. tbody ist also vorhanden.

deine vermutungen haben mir leider kein stück weitergeholfen ("vielleicht mag deswegen innerHTML nicht."). :-(

freundl. Grüsse aus Berlin, Raik

[Cybaer]

Hi,

ich habe vom firefox geschrieben, nicht vom IE.

Du hast vergessen zu erwähnen, daß es sich um *keine* "öffentliche Seite" handelt (s. Forums-Richtlinien).

Insofern ist Mudguards freundlicher Hinweis also absolut berechtigt.

Der IE mag es nämlich gar nicht, innerhalb von Tabellen mit innerHTML "rumzumachen".

Gruß, Cybaer

[wahsaga]

hi,

Der IE mag es nämlich gar nicht, innerhalb von Tabellen mit innerHTML "rumzumachen".

Das ist kein "nicht mögen", sondern so definiert:
"The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR."

gruß,
wahsaga

[Cybaer]

Hi,

Das ist kein "nicht mögen", sondern so definiert:

:)

Er mag es halt definitiv nicht. ;-)

Gruß, Cybaer

[Raik]

Hallo, wahsaga!

Das ist kein "nicht mögen", sondern so definiert:
"The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR."

vielen dank! das ist doch mal eine konkrete aussage. ich hätte nie vermutet, dass es beim IE daran liegen könnte, sondern immer fehlerhaften code (falsche syntax, vergessene klammern, etc.) bei mir vermutet.

freundl. Grüsse aus Berlin, Raik

[Raik]

Hallo, Cybaer!

ich habe vom firefox geschrieben, nicht vom IE.
Du hast vergessen zu erwähnen, daß es sich um *keine* "öffentliche Seite" handelt (s. Forums-Richtlinien).

stimmt.

Insofern ist Mudguards freundlicher Hinweis also absolut berechtigt.

sein hinweis auf fehlende attribute und anführungszeichen ist zwar sachlich richtig, hat aber nicht das geringste mit dem fehler zu tun.
wenn dem so wäre, dann hätte innerHTML das fehlerhafte img-element entfernen müssen, nicht die fehlerfreien td-elemente.

Der IE mag es nämlich gar nicht, innerhalb von Tabellen mit innerHTML "rumzumachen".

danke für den hinweis, falls ich mal mit dem IE "rummache". ;-)

freundl. Grüsse aus Berlin, Raik

[Struppi]

warum der Mischmasch aus innerHTML und createElement?
Erscheint mir unlogisch, die tr per createElement zu erzeugen, die td-Elemente aber per innerHTML.

ich sprach davon, dass ich ein template parsen will. wie komplex soll eine funktion denn werden, die aus einem übergebenen werte-array anhand der werte erkennen soll, wieviele tabellenzellen zu erzeugen sind, welche daten evtl. gemeinsam in einer zelle stehen sollen, und  welche daten als parameter für ein bild oder einen link dienen sollen?

also ich finde deine Funktion nicht mitminder komplex, das was du da beschreibst, liesse sich z.b. so lösen (ungetestet):

  
window.onload = function()  
{  
  var t = document.getElementById('table');  
  var r1 = NEW_ROW(t,  
  [  
  'nick 1',  
  'level 1',  
  'user id 1',  
  {tag: 'img', src: 'an_aus.gif', alt: '...'}  
  ]  
  );  
}  
function NEW_ROW(table, recordset)  
{  
    var row = document.createElement("tr");  
    for(var i = 0; i < recordset.length; i++) row.appendChild( createTD( recordset[i] )) ;  
    table.appendChild(row);  
}  
function createTD( element )  
{  
    var o = document.createElement('td');  
    var content;  
    if(element.tag)  
    {  
        // Ein HTML Element  
        content = document.createElement(element.tag);  
        for(var a in element)  
            if(a != 'tag') content[a] = element[a];  
    }  
    else  
    {  
        // Ein Textknoten  
        content = document.createTextNode(element);  
    }  
    o.appendChild( content );  
    return o;  
}  

Damit liessen sich x-beliebige HTML Elemente erzeugen.

Struppi.

[Raik]

Hallo, Struppi!

also ich finde deine Funktion nicht mitminder komplex, das was du da beschreibst, liesse sich z.b. so lösen (ungetestet):

window.onload = function()
{
  var t = document.getElementById('table');
  var r1 = NEW_ROW(t,
  [
  'nick 1',
  'level 1',
  'user id 1',
  {tag: 'img', src: 'an_aus.gif', alt: '...'}
  ]
  );
}

  
damit müsste ich wieder eine spezielle syntax erlernen, um das nutzen zu können. das finde ich immer das faszinierende an diesen ganzen frameworks, wo jemand versucht, mit einer eigenen syntax html/javascript/css zu kapseln. wenn es fehlerfrei funktionieren und alle möglichkeiten von html/javascript/css unterstützen soll, wird es wieder so komplex, sind wieder so viele parameter anzugeben, dass der aufwand der gleiche ist, wie gleich selber html/javascript/css zu schreiben (zuzüglich dem lernaufwand für die neue meta-sprache).  
wenn ich innerhalb der tabellenzellen jetzt noch andere elemente ineinander verschachteln will, wird das ganze noch komplexer. da geht schnell mal eine klammer verloren und dann rätselt man, warum das nicht mehr funktioniert.  
die schreibweise mit eckigen klammern war mir aber auch neu. das vereinfacht an anderer stelle evtl. wieder einiges. danke!  
  
b.t.w. kann man in javascript auch referenzen auf variablen erstellen, wie in php?  
  
freundl. Grüsse aus Berlin, Raik  

-- 
Der IE ist wichtig. Man benötigt ihn, um sich einen Browser zu besorgen.  
![](http://mitglied.lycos.de/ed2kserver/fux.png) [Resizeable Textarea 0.1a](http://www.erweiterungen.de/detail/127/)

[Struppi]

damit müsste ich wieder eine spezielle syntax erlernen, um das nutzen zu können. das finde ich immer das faszinierende an diesen ganzen frameworks, wo jemand versucht, mit einer eigenen syntax html/javascript/css zu kapseln.

Dieses "eigene" Format ist angelehnt an json nur dass du hier ein Array statt einem Objekt benötigst, da die Reihenfolge definiert sein muss.

wenn es fehlerfrei funktionieren und alle möglichkeiten von html/javascript/css unterstützen soll, wird es wieder so komplex, sind wieder so viele parameter anzugeben, dass der aufwand der gleiche ist, wie gleich selber html/javascript/css zu schreiben (zuzüglich dem lernaufwand für die neue meta-sprache).

Naja, die "meta Sprach ist sehr simpel, und gerade so wird es weniger komplex, da du in deinem Falle jedesmal den kompletten HTML code ändern musst. Ausserdem hast du hier den Vorteil, dass du wenn nötig die Referenzen auf die Tabellenzellen hast.

wenn ich innerhalb der tabellenzellen jetzt noch andere elemente ineinander verschachteln will, wird das ganze noch komplexer. da geht schnell mal eine klammer verloren und dann rätselt man, warum das nicht mehr funktioniert.

Naja, dann wird auch der HTML komplexer und nicht funktioniert hatte ja dein Ansatz, du hast hier kaum eine Fehlerkontrolle aber auch kaum Möglichkeiten.

b.t.w. kann man in javascript auch referenzen auf variablen erstellen, wie in php?

Nicht auf einfach Datentypen, wie Strings und Zahlen. Objekte dagegen sind immer Referenzen.

Struppi.

[Raik]

Hallo, Struppi!

Naja, dann wird auch der HTML komplexer und nicht funktioniert hatte ja dein Ansatz, du hast hier kaum eine Fehlerkontrolle aber auch kaum Möglichkeiten.

jein, nicht ganz. funktioniert hat mein ansatz schon, aber der fux hat noch nen bug, wie ich unter "lösung" auch schon zitiert habe.

freundl. Grüsse aus Berlin, Raik

[Ashura]

Hallo Raik.

Ich schließe mich MudGuards Anmerkungen an und rate wie immer zu insertCell und insertRow.

Einen schönen Samstag noch.

Gruß, Ashura

[MudGuard]

Hi,

Ich schließe mich MudGuards Anmerkungen an

Kein Anschluß unter diesen Anmerkungen! ;-)

cu,
Andreas

[Raik]

Hallo,

Quelle: http://webfx.eae.net/dhtml/mozInnerHTML/mozInnerHtml.html
<zitat>
Issues: Ranges need to operate on a document object and so does the creation of a new element (document.createRange() and document.createElement(sTagName)). The problem is that these two must operate on the same document but _node.ownerDocument_is_null_in_Mozilla_until_the_node_has_been_inserted_into_a_document. This is a bug in current build. This will lead to a problem where the node has not yet been inserted into the document.
</zitat>

das brachte mich darauf, mal die reihenfolge umzudrehen:

...

  
 var row = document.createElement("TR");  
 table.appendChild(row); // ZUERST das tr-element ins dokument EINFÜGEN  
 table.lastChild.innerHTML = source; // und ERST DANN darauf zugreifen  

~~~...  
  
und siehe da, jetzt funktioniert es, wie gewünscht.  
  
freundl. Grüsse aus Berlin, Raik  

-- 
Der IE ist wichtig. Man benötigt ihn, um sich einen Browser zu besorgen.  
![](http://mitglied.lycos.de/ed2kserver/fux.png) [Resizeable Textarea 0.1a](http://www.erweiterungen.de/detail/127/)