innerHTML-Irritation beim NS6
Chräcker Heller
- javascript
Hallo zusammen,
kaum zu glauben, aber ich habe meine Seite versucht, NS6 fest zu machen. (Soweit klapts jetzt auch....): Dabei stieß ich auf ein Problem, bei dem ich gerne zu meiner Erbauung wissen möchte, ob der NS6 her berchtigte Mucken gemacht hat oder er einfach "sinnlos" stur war. Ich habe im Body ein Div mit der id "stempel". Ich lese (im Bsp. jetzt) den Inhalt des Divs per innerHTML aus und "verlängere" diesen Inhalt durch ein weiteres Div. Dieses Div-im-Div schreibe ich wieder per innerHTML in das Div Stempel. Vulgo: ich füge also von mal zu mal dynamisch ins oben genannte Div stempel weitere Divs ein. Soweit so gut.
Ich habe dieses Demoscript gebastelt, daß zu Verdeutlichung, wie es funktioniert, pro Aufruf per alert uns den Inhalt des ausgelesenen Stempel-Div-Inhaltes auswirft.
_____________________
function test() {
inhalt=document.getElementById("stempel").innerHTML;
document.getElementById("stempel").innerHTML=inhalt+'<div style="position:absolute; z-index:1;" id="test"></div>';
alert(inhalt);
return
}
_________________________
, aufgerufen wirds per <a href="javascript:test();">test</a> und im Body muß natürlich noch ein div namens stempel sein.
So läufts. Jetzt die Version, die ich zuerst hatte, und die nicht lief:
_____________________
function test() {
inhalt=document.getElementById("stempel").innerHTML;
document.getElementById("stempel").innerHTML=inhalt+'<div id="test" style="position:absolute; z-index:1;"></div>';
alert(inhalt);
return
}
_________________
bevor Ihr Euch jetzt todsucht: der unterschied liegt im Div, das ich ins stempeldiv reinschreibe. Bei der zweiten Version steht der id vor dem style, bei der ersten Version habe ich das id nach hinten geschoben.
Und wers mir auch so glaubt ;-) Bei der zweiten Version steht der von mir gewünschte Inhalt nur verhackstückelt "drin" und wird von Aufruf zu Aufruf mehr und mehr verhackstückelt....
Meine Überlegung zur Rettung des NS6: gibt es eine Definition, die besagt, daß man CSS-Angaben immer vor allen anderen Angfaben, etwa wie ids, schreiben muß? Oder hat der NS hier nur eine einfache Macke? (nein, keine Hähme, nur eine Frage, zumal ich stunden damit verbracht habe, um die Lösung zu finden)....
Ach ja, und wo ich gerade dabei bin: Ich schreibe natürlich keine leeren divs da rein, sondern in den Divs liegen wiederum Bilder. Bei meinem NS6.01 löscht er alle bisher dynamisch geschriebenen Images vor dem neu-rendern des zusätzlich eingefügten images. Das Ergebnis ist ein "lustiges" flackern. Ist das eine Eigenart, die alle weiteren versionen (inklusive Mozillas) auch haben? (Wäre dem Dhtml sicherlich etwas abträglich).....
Danke,
Chräcker
und die Routine in Aktion gibts unter ;-)
Hallo Cräcker,
kaum zu glauben, aber ich habe meine Seite versucht, NS6 fest zu machen. (Soweit klapts jetzt auch....): Dabei stieß ich auf ein Problem, bei dem ich gerne zu meiner Erbauung wissen möchte, ob der NS6 her berchtigte Mucken gemacht hat oder er einfach "sinnlos" stur war.
Ich habe im Body ein Div mit der id "stempel". Ich lese (im Bsp. jetzt) den Inhalt des Divs per innerHTML aus und "verlängere" diesen Inhalt durch ein weiteres Div. Dieses Div-im-Div schreibe ich wieder per innerHTML in das Div Stempel. Vulgo: ich füge also von mal zu mal dynamisch ins oben genannte Div stempel weitere Divs ein. Soweit so gut.
Ach ja, und wo ich gerade dabei bin: Ich schreibe natürlich keine leeren divs da rein, sondern in den Divs liegen wiederum Bilder. Bei meinem NS6.01 löscht er alle bisher dynamisch geschriebenen Images vor dem neu-rendern des zusätzlich eingefügten images. Das Ergebnis ist ein "lustiges" flackern. Ist das eine Eigenart, die alle weiteren versionen (inklusive Mozillas) auch haben? (Wäre dem Dhtml sicherlich etwas abträglich).....
Diese Sturheit betrifft nur deine Version (Mozilla nicht getestet), in der 6.1 tritt das Problem nicht mehr auf.
Allerdings als ich das Posting gelesen habe, fand ich, dass es hier eigentlich sehr sehr viel sinnvoller ist, mit dem Elementebaum zu arbeiten. Also habe ich mal etwas gespielt und raus kam das:
x=50;
function test() {
//Achtung funktioniert erst ab NN Version 6
//Element neuen Div erzeugen
var neuDiv=document.createElement("div");
//Styleattribut erzeugen und Wert zuweisen
var neuDivStyle=document.createAttribute("style");
neuDivStyle.nodeValue ="position:absolute;top:"+x+"px";
//Attribut id erzeugen und Wert zuweisen
var neuDivId=document.createAttribute("id");
neuDivId.nodeValue ="test"+x;
//Attribute anhaengen
neuDiv.setAttributeNode(neuDivStyle);
neuDiv.setAttributeNode(neuDivId);
//Element Bild erzeugen
var Bild=document.createElement("img");
//Attribut src erzeugen und Wert zuweisen
var BildSrc=document.createAttribute("src");
BildSrc.nodeValue ="stempel.gif";
//Attribut width erzeugen und Wert zuweisen
var BildWeite=document.createAttribute("width");
BildWeite.nodeValue ="10px";
//Attribut height erzeugen und Wert zuweisen
var BildHoehe=document.createAttribute("height");
BildHoehe.nodeValue ="10px";
//Attribute anhaengen
Bild.setAttributeNode(BildSrc);
Bild.setAttributeNode(BildWeite);
Bild.setAttributeNode(BildHoehe);
//Element Bild in das Element neuDiv einhaengen
neuDiv.appendChild(Bild);
//Element neuDiv in das Element stempel einhaengen
document.getElementById("stempel").appendChild(neuDiv);
var inhalt=document.getElementById("stempel").innerHTML;
x+=50;
alert(inhalt);
return
}
Lustiger Weise, fügt NN6.0 bei dieser Methode die id auch nach dem Styleattribut ein. Jetzt macht er aber alles richtig und zerhaut nichts.
Viele liebe Grüße und weiterhin fröhliches Stempeln
Antje
Hallo Antje,
wunderbar. (jetzt keine Ironie, folgendes finde ich wirklich wunderbar) Denn der Teil hinter "liegt am NS6.01" ist die Antwort, die ich nicht gesucht habe. - und zwar, weil ich gar nicht wuste, das "es auch so geht" (zugegeben, weil ich mich auch noch nicht so tief mit der für mich neuen Materie beschäftigt habe....) Wäre also erst einmal lange nicht ohne Deine Antwort drauf gekommen....
Und es zeigt sich: meine Eigenbackmethode geht zwar auch, aber Dein Weg sieht nicht nur spannender, sondern auch "eleganter" aus, und schon habe ich ein neues Lernfeld bekommen. Danke! (das nur einmal an alle, die jetzt schon wieder anfangen wollen, die "Lerne-auch-mal-dieses-Antworten" zu kritisieren ;-) )
Chräcker (der sich jetzt Dein Script in Ruhe vornimmt....)
PS. aus gut ausgestatteten Kreisen habe ich gerade erfahren, daß die Bilder bei Mozilla auch nicht flackern....
Hallo Chräcker
Wäre also erst einmal lange nicht ohne Deine Antwort drauf gekommen....
früher oder später sicher, denn in SELF8 wird dir das ja buchstäblich entgegengeschleudert.
Und es zeigt sich: meine Eigenbackmethode geht zwar auch, aber Dein Weg sieht nicht nur spannender, sondern auch "eleganter" aus, und schon habe ich ein neues Lernfeld bekommen.
Also in jedem Fall würde ich es nicht einsetzen wollen. Aber bei deinem Beispiel bot es sich wirklich an und ich konnte der Verlockung nicht widerstehen. Außerdem weiß ich, dass das bei dir nicht verschwendet ist und du garantiert was feines daraus macht.
Viele liebe Grüße
Antje
PS: <g> um Mittag rum war ich stempeln, im IE läufst auch ganz brav