innerHTML im IE schneidet Elemente ab

[Kropff]

<select id="bla" name="firstSelect" multiple size="3" ></select>
<script type="text/javascript"> 
  var str = '<option>11111</option><option>22222</option><option>33333</option>';
  document.getElementById('bla').innerHTML = str;
  console.log (document.getElementById('bla').innerHTML);
</script> 

ergibt ein

11111</OPTION><OPTION>22222</OPTION><OPTION>33333</OPTION>

Kann mir das mal einer erklären? Wieso fehlt das erste option-Element? Wenn ich zusätzlich mit optgroups arbeite wird zusätzlich das erste ebenfalls nicht gelistet.

Peter

[onemorenerd]

Versuch mal die Options als ChildNodes ins Select zu hängen.

[AmicaNoctis]

Hallo Peter,

wieso der IE da schon wieder böse ist, weiß ich zwar jetzt auch nicht, aber erstens nimmt man für sowas die DOM-Methoden (innerHTML ist so '90er ) und zweitens kannst du mal versuchen, einen Zeilenumbruch an den Anfang und das Ende des Strings zu setzen.

Gruß,

Amica

[Kropff]

Versuch mal die Options als ChildNodes ins Select zu hängen.

Genau das wollte ich vermeiden, da ich die Elemente in einer PHp-Datei generiere und per Ajax hole. Das mit dem innerHTML wollte ich deshalb machen, damit ich nicht jedes Element einzeln einhängen muss.

Hallo Peter,

wieso der IE da schon wieder böse ist, weiß ich zwar jetzt auch nicht, aber erstens nimmt man für sowas die DOM-Methoden (innerHTML ist so '90er ) und zweitens kannst du mal versuchen, einen Zeilenumbruch an den Anfang und das Ende des Strings zu setzen.

Die Zeilenumbrüche existieren in der echten Datei. Das Ergebnis ist dasselbe. Und mit innerHTML arbeite ich heute zum ersten Mal, weil es in diesem Fall einfacher ist.

Peter

[AmicaNoctis]

damit ich nicht jedes Element einzeln einhängen muss.

Das wäre doch jetzt aber auch nicht so kompliziert. Wenn du schon den ganzen AJAX-Aufwand betreibst, sollte das bisschen Code doch den Braten jetzt auch nicht mehr fett machen. Was kommt denn von PHP zurück? Eben dieser String mit den option-Elementen drin? Warum nicht gleich JSON, da kommst du doch sogar noch besser?

Anderer Vorschlag: Du formulierst das script-Element XML-konform mit <![CDATA[...]]>. Vielleicht macht es der IE ja doch, wenn du ihn nicht im Quirks-Mode laufen lässt, denn die "<" von den option-Elementen sind ja jetzt auch nicht direkt gültig - je nach gewähltem DocType.

[Kropff]

Das wäre doch jetzt aber auch nicht so kompliziert. Wenn du schon den ganzen AJAX-Aufwand betreibst, sollte das bisschen Code doch den Braten jetzt auch nicht mehr fett machen.

ich wollte es diesmal ohne machen. Und da bin stur wie ein Esel

Anderer Vorschlag: Du formulierst das script-Element XML-konform mit <![CDATA[...]]>. Vielleicht macht es der IE ja doch, wenn du ihn nicht im Quirks-Mode laufen lässt, denn die "<" von den option-Elementen sind ja jetzt auch nicht direkt gültig - je nach gewähltem DocType.

Doctype ist hier egal, hab schon alle Varianten getestet. Ich probier das mal mit dem CDATA und melde mich. Btw: Dieses Phänomen tritt nur bei bestimmten Tags auf. Bis jetzt habe ich td, option und optgroup, wo das nicht funktioniert. Bei li oder p klappt es reibungslos.

Peter

[Kropff]

So, jetzt weiß ich, dass ein Bug im IE ist. Und einen vernünftigen Workaround gibt es auch nicht. Dann mach ich es halt über's DOM: Sch*** Browser.

Peter

[AmicaNoctis]

So, jetzt weiß ich, dass ein Bug im IE ist. Und einen vernünftigen Workaround gibt es auch nicht. Dann mach ich es halt über's DOM: Sch*** Browser.

Peter

Das DOM ist der vernünftigste Workaround

[Kropff]

Das DOM ist der vernünftigste Workaround

Diesmal hätte ich mir mit innerHTML aber sehr viel Zeit sparen können. Außerdem wäre es performanter gewesen. Trotzdem war es das erste und das letzt Mal, dass ich damit gearbeitet habe.

Peter

[jmc]

Erstelle ein neues Select Element und ersetze das bestehende oder füge es ganz ein.
PS: Das Select Element sollte nicht leer sein. Weder das bereits existierende noch das neu erstellte.

[Kropff]

Erstelle ein neues Select Element und ersetze das bestehende oder füge es ganz ein.
PS: Das Select Element sollte nicht leer sein. Weder das bereits existierende noch das neu erstellte.

Das wird über das DOM erzeugt. Und deshalb ist es zu Beginn auch leer. Habe heute Nachmittag noch ein paar Sachen ausprobiert, aber das Problem bleibt bestehen. Liegt einfach am IE. Ich werde das am Montag dann "sauber" über DOM-Manipulation lösen. Das funktioniert zumindest reibungslos.

Peter

[wahsaga]

BUG&#58; Internet Explorer Fails to Set the innerHTML Property of the Select Object

[Kropff]

BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

Danke für den Hinweis, aber leider kenn ich den schon. Und so wirklich weiter geholfen hat mir das auch nicht. Zumindest was innerHTML in meinem Fall angeht.

Peter

[wahsaga]

Na ja, es beschreibt zumindest genau dein Problem - und zwar von „offizieller“ Seite aus.

Ausserdem: „Ideally, you should use the options collection to add the options of a SELECT element.“

[syntaxerror]

Das DOM ist der vernünftigste Workaround

Möhöö. Wär schön, wenn ich auch immer so argumentieren könnte.

Aber ich bin nun mal oft ein kleines Rädchen in einem großen PHP-Projekt mit mehr oder weniger viel AJAX drumrum, und diese wurden meist in PHP4 entwickelt.

Da die schönen DOM-Objekte aber erst bei PHP5 existieren, codiere ich i. d. R. PHP4-konform, d. h. im JS-Teil verwende ich sehr wohl hie und da innerHTML. Einfach weil ich da 4er-kompatibler bin, und ich sowas dann z. B. kundenseitig auf einer bestehenden, seit langem funktionierenden (und auf absehbare Zeit auch nicht zu ändern geplanten) 4er-Engine aufspielen kann.

Ich hör oft "bwaha, that's so 90s" aber das is mir egal.

Codier mal PHP4 (incl. AJAX Mist) auf 5 um, richtig schön OOP-DOM mit allem Pipapo, dabei statt innerHTML ab sofort serverseitig mit "sauberen" DOM-Methoden. Klasse Softwarekonzept - keine Frage. Aber dann sag gleich dazu: from scratch - das trifft's nämlich.