nicht angemeldet
MSIE - DOM Problem
Hallo zusammen,
soeben ist mir das folgende, völlig merkwürdige Verhalten des Internet Explorers aufgefallen (MSIE 6):
[CODE]
<html>
<head>
<script type="text/javascript">
function msietest() {
//Objekte anlegen:
var tb=document.createElement('table');
var tr=document.createElement('tr');
var td=document.createElement('td');
var wert=document.createTextNode('Test!');
tb.appendChild(tr);
tr.appendChild(td);
td.appendChild(wert);
//funktioniert bis test1
//document.getElementById('test').appendChild(wert);
//document.getElementById('test1').appendChild(td);
//document.getElementById('test2').appendChild(tr);
//document.getElementById('test3').appendChild(tb);
}
</script>
</head>
<body>
<div id="test3">
<table id="test2" border="1">
<tr id="test1">
<td id="test">
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
msietest();
</script>
</html>
[/CODE]
Was passiert ist ganz simpel: Im DOM der Seite wird eine Tabelle, eine Tabellenzeile, eine Tabellenzelle und ein Textknoten mit dem Wert "Test!" erzeugt. Der Wert ist das Kind der Zelle, diese wiederum "hängt" unter der Tabellenzeile, und Zeile schließlich unter der Tabelle. Die auskommentierten Zeilen hängen diese Hierarchie an verschiedenen Stellen in das vorhandene Element auf der Seite ein.
Kommentiert man die erste Zeile aus, so wird der Textknoten "in die Zelle gehängt" - kein Problem. Kommentiert man NUR die 2. Zeile von oben aus, wird die Tabellenzelle (mitsamt dem Textknoten) in die Tabellenzeile gehängt - funktioniert auch. Und jetzt wird´s kurios: will man unter die Tabelle die gesamte Zeile nebst Unterobjekten einfügen...aber probiert selbst. Der Fehler tritt nur beim MSIE auf, Opera oder Mozilla Browser erzeugen brav bei Bedarf die ganze Tabelle so. Da wären wir auch schon bei meinem Problem: ich muß eine solche Tabelle (Zeilen/Spalten dynamisch) per JavaScript erzeugen - und das ganze muß latürnich auch mit dem Internet Explorer laufen. Hat dazu jemand eine Idee?
-
Hi,
Du hast schlicht und einfach ein Element vergessen, welches der IE im Gegensatz zu den anderen Browsern benötigt.
freundliche Grüße
Ingo-
Thomas,
Guckst du hier http://forum.de.selfhtml.org/archiv/2005/1/t98786/#m603113Du hast schlicht und einfach ein Element vergessen, welches der IE im Gegensatz zu den anderen Browsern benötigt.
Und welches, verrät dir http://forum.de.selfhtml.org/archiv/2005/1/t98786/#m602573 ff.
Gunnar--
„Solang wir noch tanzen können
und richtig echte Tränen flennen,
ist noch alles offen,
ist noch alles drin.“
(Gundermann)-
Hallo Ingo, Hallo Gunnar,
erst mal vielen Dank für die schnelle Hilfe. Aber irgend etwas mach ich immer noch falsch:Du hast schlicht und einfach ein Element vergessen, welches der IE im Gegensatz zu den anderen Browsern benötigt.
Ich nehme an, Ihr meint <tbody>. Ich habe also die Elemente <thead> / <tfoot> / <tbody> erzeugt und hänge sie unter <table>:
[Code]
var table=document.createElement('table');
var thead=document.createElement('thead');
var tfoot=document.createElement('tfoot');
var tbody=document.createElement('tbody');
...
table.appendChild(thead);
table.appendChild(tfoot);
table.appendChild(tbody);
tbody.appendChild(tr);
[/Code]
Die ganze Testseite sieht jetzt folgendermassen aus:[Code]
<html>
<head>
<script type="text/javascript">
function msietest() {//Objekte anlegen:
var table=document.createElement('table');
var thead=document.createElement('thead');
var tfoot=document.createElement('tfoot');
var tbody=document.createElement('tbody');
var tr=document.createElement('tr');
var td=document.createElement('td');
var wert=document.createTextNode('Test!');
td.appendChild(wert);
tr.appendChild(td);table.appendChild(thead);
table.appendChild(tfoot);
table.appendChild(tbody);
tbody.appendChild(tr);//funktioniert bis test4
//document.getElementById('test1').appendChild(wert);
//document.getElementById('test2').appendChild(td);
//document.getElementById('test3').appendChild(tr);
document.getElementById('test4').appendChild(tbody);
//document.getElementById('test5').appendChild(table);}
</script>
</head>
<body><div id="test5">
<table id="test4" border="1">
<tbody id="test3">
<tr id="test2">
<td id="test1"></td>
</tr>
</tbody>
</table>
</div></body>
<script type="text/javascript">
msietest();
</script>
</html>
[/Code]Ich bin also Dank Eurer Hilfe EINEN Schritt weiter: Ich kann das <tbody>-Element MIT der Tabellenzeile in die Tabelle einhängen. ABER: die Tabelle kann ich nicht komplett unter das <div> hängen. Jetzt arbeiten übrigens alle Browser gleich: "test5" funktioniert jetzt konsequent nirgendwo ;-)
Ich mache also immer noch einen bösen Fehler in meinem Script...ich find´ ihn nur nicht! ;-(-
Okay, okay, ich hab´s endlich begriffen:
wen auch immer es interessiert ;-)
einfach im Beispiel oben zwischen <div id="test5"> und </div> alles löschen und test5 laufen lassen, dann klappt´s auch mit dem MSIE. Grund ist natürlich, dass sonst in der Tabelle eine weitere Tabelle angelegt wird...
-
-
-