Internet Explorer macht innerHTML kaputt

[c--]

Hallo,

ich möchte mit JavaScript den Code in Div-Boxen verändern.
Ich lese diesen mit innerHTML aus, füge bspw. an eine bestimmte Stelle etwas ein und schreibe den neuen Code mit innerHTML wieder zurück.

Leider gibt mit der Internet Explorer einen völlig kaputten Code zurück, wenn ich innerHTML abfrage. Da werden Elementnamen plötzlich groß geschrieben, manche Anführungszeichen fehlen, usw.

So funktioniert das natürlich nicht, da meine JavaScript-Funktionen einen ganz anderen (zudem invaliden) Code zurückbekommen, als ich geschrieben habe.

Auf den Seiten, die ich bisher dazu gefunden habe, wurde gesagt, man soll den ausgelesenen Code durch eine (selbst geschriebene) Funktion laufen lassen, die ihn wieder korrigiert, die also Anführungszeichen wieder einfügt usw.
Das kann doch nicht ernsthaft die einzige Lösung sein?

Darf ich dieses Verhalten als Fehler bezeichnen?

Wie kann ich dem IE beibringen, dass er mir das zurückgeben soll, was drin steht?

[Der Martin]

Hi,

ich möchte mit JavaScript den Code in Div-Boxen verändern.
Ich lese diesen mit innerHTML aus, füge bspw. an eine bestimmte Stelle etwas ein und schreibe den neuen Code mit innerHTML wieder zurück.
Leider gibt mit der Internet Explorer einen völlig kaputten Code zurück, wenn ich innerHTML abfrage. Da werden Elementnamen plötzlich groß geschrieben, manche Anführungszeichen fehlen, usw.

ja, das ist mindestens seit IE4 bekannt. Wie du schon schreibst: Die meisten Elementnamen in Großbuchstaben, Attribute teils sin Großbuchstaben, teils in einem aberwitzigen GrOßklEinmIx, Anführungszeichen werden willkürlich weggelassen (aber nicht alle), die Reihenfolge von Attributen durcheinandergewürfelt, Zeilenumbrüche innerhalb von Tags eingefügt.
Das ist genau dieselbe Verstümmelung, wie wenn man eine Webseite mit dem IE lokal speichert.

Auf den Seiten, die ich bisher dazu gefunden habe, wurde gesagt, man soll den ausgelesenen Code durch eine (selbst geschriebene) Funktion laufen lassen, die ihn wieder korrigiert, die also Anführungszeichen wieder einfügt usw.
Das kann doch nicht ernsthaft die einzige Lösung sein?

Es kann vor allem keine Lösung sein - das würde ja heißen: Baue einen HTML-Parser in Javascript.

Darf ich dieses Verhalten als Fehler bezeichnen?

IMHO ja.

Wie kann ich dem IE beibringen, dass er mir das zurückgeben soll, was drin steht?

Mir ist bei Verwendung von innerHTML keine Möglichkeit bekannt. Umgänglicher wird der IE nur, wenn man die einzelnen Nodes über DOM-Methoden manipuliert, und innerHTML meidet.

So long,
 Martin

[c--]

Danke für deine Antwort.

Ich habe mir einen Workaround ausgedacht, der für meinen konkreten Fall, sowie vermutlich für die meisten anderen Fälle funktioniert.
Das einzige, was definitiv nicht funktioniert ist, wenn der auszulesende Code einen HTML-Kommentar enthält.

Den Code, den ich ursprünglich aus der Div-Box auslesen wollte, setze ich in Kopie in einen besonderen HTML-Kommentar (dieser wird vom IE nicht verstümmelt). Wenn man mit PHP arbeitet, muss man diesen Code nicht zweimal schreiben, sondern speichert ihn einmal in einer Variable und gibt dessen Inhalt dann einmal in der Div-Box aus und einmal in dem besonderen HTML-Kommentar.
Mit besonders meine ich eine bestimmte Syntax, die ich mir ausgedacht habe:
Der Codeblock bekommt einen Namen zur Identifikation (auf die Weise können beliebig viele Codeblöcke verwendet werden). Dieser steht einzeln in einem Kommentar. Unmittelbar danach folgt ein weiterer Kommentar, der den Code enthält:

<!-- divcode1 --><!-- <a href="http://www.google.com/" target="_blank" class="sehrhaesslicherlink" onclick="sinnlosemeldung();">Dieser ganze HTML-Code ist eine mit PHP dynamisch erstellte Kopie des Codes im Div und wird auch im IE richtig übermittelt - mit Anführungszeichen usw.</a>

Mit meiner JavaScript-Funktion GetCommentBlock kann man dann den Code komfortabel extrahieren:

div.innerHTML = GetCommentBlock(divparent.innerHTML, "divcode1").replace("sinnlosemeldung", "sinnvollemeldung");  
  
function GetCommentBlock(source, blockid)  
{  
//Fuck IE crap shit bullshit binary trash  
var pos1 = source.indexOf("<!-- " + blockid + " -->");  
var pos2 = pos1 + blockid.length;  
var pos3 = source.indexOf("<!-- ", pos2);  
var pos4 = pos3 + 5;  
var pos5 = source.indexOf(" -->", pos4);  
var buf1 = source.substring(pos4, pos5);  
  
if (pos1 > -1)  
return buf1;  
}  

Es mag einem umständlich vorkommen, dass man den Code, den man aus dem Div auslesen will, in Kopie in "meinen" Kommentar einbauen muss, aber mit PHP geht das ganz einfach und dynamisch.

Es würde mich wirklich interessieren, was ihr von meiner Idee bzw. meinem Code haltet!

[c--]

Typo: Danach kommt natürlich noch ein " -->".

<!-- divcode1 --><!-- <a href="http://www.google.com/" target="_blank" class="sehrhaesslicherlink" onclick="sinnlosemeldung();">Dieser ganze HTML-Code ist eine mit PHP dynamisch erstellte Kopie des Codes im Div und wird auch im IE richtig übermittelt - mit Anführungszeichen usw.</a>

[Cheatah]

Hi,

<!-- divcode1 --><!-- <a href="http://www.google.com/" target="_blank" class="sehrhaesslicherlink" onclick="sinnlosemeldung();">[...]
div.innerHTML = GetCommentBlock(divparent.innerHTML, "divcode1").replace("sinnlosemeldung", "sinnvollemeldung");

kann es sein, dass Du nicht das geringste Interesse am innerHTML hast und einfach nur die onclick-Eigenschaft des Elements verändern möchtest?

Es würde mich wirklich interessieren, was ihr von meiner Idee bzw. meinem Code haltet!

Sehr viel, und zwar Abstand.

Cheatah

[c--]

kann es sein, dass Du nicht das geringste Interesse am innerHTML hast und einfach nur die onclick-Eigenschaft des Elements verändern möchtest?

Nein!
Dazu bräuchte ich den ganzen Code nicht, das ginge mit .onclick = funktion;.

Es würde mich wirklich interessieren, was ihr von meiner Idee bzw. meinem Code haltet!

Sehr viel, und zwar Abstand.

Wäre auch meine Antwort gewesen, wenn mir das konkrete Problem nicht hundertprozentig klar gewesen wäre.

Da ich den innerHTML einer Div-Box nicht zuverlässig auslesen kann, gebe ich deren Inhalt ein zweites Mal in einem Kommentar aus. Ich möchte ja den unveränderten Inhalt des Divs (also den ungeparsten Code) angepasst wieder in die Div schreiben. Also lese ich den Kopie-Code aus dem Kommentar aus, passe diesen leicht an und schreibe das Ergebnis mit innerHTML in die Div-Box.

Ich habe kein Lob o.ä. erwartet, falls das so rübergekommen sein sollte. Schließlich habe ich keine Meisterleistung vollbracht (im Gegenteil), sondern eine Idee gehabt, wie ich mein Problem lösen könnte - und zwar mit Erfolg (auch wenn ich einen Umweg gehe).

Spricht denn etwas gegen meine Vorgehensweise?

[ChrisB]

Hi,

Spricht denn etwas gegen meine Vorgehensweise?

Das können wir dir immer noch nicht sagen, weil du *immer* *noch* *nicht* beschrieben hast, was du eigentlich *erreichen* möchtest.

Du hast jetzt zwar zum wiederholten Mal beschrieben, was du machst - aber immer noch nicht warum, zu welchem Zweck. Sinnvolle Alternativen kann man aber nur vorschlagen, wenn man diesen kennt.

MfG ChrisB

[Deus Figendi]

Du hast jetzt zwar zum wiederholten Mal beschrieben, was du machst - aber immer noch nicht warum, zu welchem Zweck. Sinnvolle Alternativen kann man aber nur vorschlagen, wenn man diesen kennt.

Ich kann ChrisB hier nur beipflichten, es ist noch gänzlich unklar, was dein Ziel ist.

Beispielsweise könnte man aus deinem Text herauslesen, dass du letztlich zwei Varianten des gleichen Elements haben willst und zwischen diesen hin und her wechseln möchtest.
Ich bin nicht sicher ob der zweite Zustand beim generieren der Seite mit PHP bereits bekannt ist. Falls ja scheint es mir irgendwie einfacher, wenn du beide Elemente einfach so reinschreibst nur mit unterschiedlichen Klassen, von denen eine ausgeblendet wird (display:hidden;). Anschließend schaltest du die Klassen mit JS einfach um.

Oder aber wie oben vorgeschlagen du verwendest normale DOM-Operationen und änderst genau die Punkte, die du geändert haben willst anstatt HTML zu generieren.
Denn wenn du HTML generierst ist der Browser gezwungen es neu zu parsen, während er wenn du DOM-Operationen verwendest das Parsing quasi wegfällt und nur noch das Rendern bleibt.
Der Unterschied ist eben ob du dem Kollegen (Browser) einen Hammer (DOM-Objekt) gibst oder ob du ihm die Bauanleitung (HTML) für einen Hammer gibst, weil Stiel und Eisen schon hat. Ersteres ist irgendwie effizienter.
Den Nagel reinhauen (rendern) muss der Kollege in jedem Fall.

Im Übrigen habe ich noch nie innerHTML benutzt oder benutzen müssen, wenn ich den Inhalt eines Textknoten haben will verwende ich .data und wenn ich Elementknoten verändern will verwende ich DOM-Operationen (.childNodes, getElement(s)By*, first/last/next[selten] ...).

.innerHtml zu verwenden käme mir vielleicht in den Sinn, wenn ich fertiges unbekanntes HTML irgendwo rumliegen habe und einfach ins Dokument schmeißen will wie es ist. Wenn ich dann nämlich DOM-Operationen verwenden wollte müsste ich das Zeug erst zu XML (oder eine andere Objekt-Struktur) parsen und dann wieder reinpflegen. Eine solche Aufgabe ist mir aber noch nicht unter gekommen.

[Cheatah]

Hi,

kann es sein, dass Du nicht das geringste Interesse am innerHTML hast und einfach nur die onclick-Eigenschaft des Elements verändern möchtest?
Nein!
Dazu bräuchte ich den ganzen Code nicht, das ginge mit .onclick = funktion;.

ja, eben. Dein Code würde in etwa das gleiche Ergebnis erzielen, nur viel, viel umständlicher - sowohl für Dich als auch für den Browser.

Wäre auch meine Antwort gewesen, wenn mir das konkrete Problem nicht hundertprozentig klar gewesen wäre.

Vielleicht solltest Du jetzt tatsächlich beginnen, Dein konkretes Problem auch anderen klar zu machen. Ansonsten drehen wir uns im Kreis.

Cheatah

[JürgenB]

Hallo c,

... gebe ich deren Inhalt ein zweites Mal in einem Kommentar aus. ...

du weißt, dass es in Javascript auch Variablen gibt und dass man ihnen per PHP auch einen Startwert geben kann, da PHP ja das Script erstellt.

Gruß, Jürgen

[ChrisB]

Hi,

Leider gibt mit der Internet Explorer einen völlig kaputten Code zurück, wenn ich innerHTML abfrage. Da werden Elementnamen plötzlich groß geschrieben, manche Anführungszeichen fehlen, usw.

So funktioniert das natürlich nicht, da meine JavaScript-Funktionen einen ganz anderen (zudem invaliden) Code zurückbekommen, als ich geschrieben habe.

Das Problem kannst du aber auch in anderen Browsern bekommen.
Wenn du innerHTML etwas zuweist, und es anschließend wieder ausliest, besteht keinerlei Garantie, dass das immer noch das selbe ist. innerHTML ist keine Eigenschaft, um Stringwerte zu „speichern“ - sondern eine *Schnittstelle* zum DOM.
Dein HTML-Code, den du zuweist, wird vom Browser geparst, und in eine DOM-Knotenstruktur umgesetzt.
Wenn du dann innerHTML wieder ausliest, dann passiert das gleiche Rückwärts - der Browser baut aus seinem DOM wieder eine HTML-Repräsentation in Textform.

Auf den Seiten, die ich bisher dazu gefunden habe, wurde gesagt, man soll den ausgelesenen Code durch eine (selbst geschriebene) Funktion laufen lassen, die ihn wieder korrigiert, die also Anführungszeichen wieder einfügt usw.
Das kann doch nicht ernsthaft die einzige Lösung sein?

Da du kein konkretes Problem beschrieben hast, kann ich dir nicht sagen, was überhaupt irgendwofür eine Lösung sein könnte oder nicht.

Darf ich dieses Verhalten als Fehler bezeichnen?

Du darfst dein Vorgehen als fehlerhaft betrachten.

Wie kann ich dem IE beibringen, dass er mir das zurückgeben soll, was drin steht?

Was wo „drin steht“?

MfG ChrisB

[c--]

Wenn du innerHTML etwas zuweist, und es anschließend wieder ausliest, besteht keinerlei Garantie, dass das immer noch das selbe ist. innerHTML ist keine Eigenschaft, um Stringwerte zu „speichern“ - sondern eine *Schnittstelle* zum DOM.

Danke für die Info, das ist ein weiterer Grund, Code nicht mehr mit innerHTML auszulesen.

Da du kein konkretes Problem beschrieben hast, kann ich dir nicht sagen, was überhaupt irgendwofür eine Lösung sein könnte oder nicht.

Ich bin der Meinung, ein konkretes Problem beschrieben zu haben.
Ich weiß nicht, ob du ein Codebeispiel suchst ("vorher" "hinterher" bzw. aus '<a href="" class="b">' mach '<A class=b href="">'), aber ich wüsste nicht, inwieweit dies zum besseren Verständnis beiträgt.
Ich lasse mich gerne korrigieren, falls jemand anderer Meinung ist (nicht nur diesbezüglich).

Du darfst dein Vorgehen als fehlerhaft betrachten.

Ja oder zumindest nicht zuverlässig - ich kann mich offenbar nicht darauf verlassen, dass ich mit innerHTML das bekomme, was ich geschrieben habe.

Wie kann ich dem IE beibringen, dass er mir das zurückgeben soll, was drin steht?

Was wo „drin steht“?

Natürlich da, wo ich es versuche auszulesen.
Ich habe doch geschrieben, dass ich den HTML-Inhalt einer Div-Box auslesen will.
Also wäre in dem Fall die Div-Box das "wo".

[ChrisB]

Hi,

Da du kein konkretes Problem beschrieben hast, kann ich dir nicht sagen, was überhaupt irgendwofür eine Lösung sein könnte oder nicht.

Ich bin der Meinung, ein konkretes Problem beschrieben zu haben.

Du hast nur bechrieben, dass du innerHTML zuweist und wieder ausliest, und dir dabei die Veränderung der Daten durch den Browser Probleme macht.

Was du aber eigentlich damit *erreichen* willst, hast du nicht beschrieben.

MfG ChrisB