Gerd Gruber: nodes (firefox und iexplorer unterschiede)

Hallo Leute,

kann mir vielleicht hier jemand helfen. Ich bin am Verzweifeln.
Folgende kleine Testseite unten, funktioniert einwandfrei im firefox, bringt aber im Internet Explorer in Zeile 17 einen Javascript-Error.
Ich versteh nicht wieso. Ich bin mittlerweile recht ahnungslos.
Kann mir vielleicht jemand sagen, was ich falsch mache, damit es auch im IE funktioniert.

Vielen Dank im voraus

Gerd

Hier die kleine Seite, die mein Problem sehr gut darstellt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function test() {
    var newDIV = document.createElement("div");
    var Ausrichtung1 = document.createAttribute("id");
    Ausrichtung1.nodeValue = 'Layer1';
    var divid=Ausrichtung1.nodeValue;
    newDIV.setAttributeNode(Ausrichtung1);
    var Ausrichtung2 = document.createAttribute("style");
    Ausrichtung2.nodeValue = 'position:absolute; width:93px; height:94px; z-index:1; left:154px; top:90px; visibility: visible;';
    newDIV.setAttributeNode(Ausrichtung2);
    document.getElementById("divcontainer").appendChild(newDIV);

var newa = document.createElement("a");
    var Ausrichtung1 = document.createAttribute("href");
    Ausrichtung1.nodeValue = 'javascript:;';
    newa.setAttributeNode(Ausrichtung1);
    var Ausrichtung6 = document.createAttribute("id");
    Ausrichtung6.nodeValue ='a1';
    var aid=Ausrichtung6.nodeValue;
    newa.setAttributeNode(Ausrichtung6);
    document.getElementById(divid).appendChild(newa);

var newtextlink = document.createTextNode('test');
    document.getElementById(aid).appendChild(newtextlink);
}
//-->
</script>
<body>
<p id="divcontainer" name="divcontainer"></p>
<script language="JavaScript" type="text/javascript">
<!--
    test();
//-->
</script>
</body>
</html>

  1. Hi,

    Folgende kleine Testseite unten, funktioniert einwandfrei im firefox, bringt aber im Internet Explorer in Zeile 17 einen Javascript-Error.
    Ich versteh nicht wieso. Ich bin mittlerweile recht ahnungslos.

    Weil Du ein div in ein p einhängen willst?
    p darf kein div enthalten.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      Folgende kleine Testseite unten, funktioniert einwandfrei im firefox, bringt aber im Internet Explorer in Zeile 17 einen Javascript-Error.
      Ich versteh nicht wieso. Ich bin mittlerweile recht ahnungslos.

      Weil Du ein div in ein p einhängen willst?
      p darf kein div enthalten.

      cu,
      Andreas

      Achso, deshalb funktioniert es im Firefox wunderbar. Alles klar.
      Wenn du die kleine Beispielseite getestet hättest, würde die aufgefallen sein, dass der IExplorer die Zuweisung des style-Attributes nicht mag.
      Hier weis ich nicht wieso, dass so ist und wie ich es umgegen kann.
      Ok div in p ist vielleicht nicht schön, man könnte dass Beispiel auch so umändern dass es direkt unter den body-tag sich einfügt.
      Aber dies bringt genauso denselben Fehler beim IE.

      1. Tach,

        Achso, deshalb funktioniert es im Firefox wunderbar. Alles klar.

        das ist Zufall, und kann in einer anderen Version anders sein.

        Wenn du die kleine Beispielseite getestet hättest, würde die aufgefallen sein, dass der IExplorer die Zuweisung des style-Attributes nicht mag.
        Hier weis ich nicht wieso, dass so ist und wie ich es umgegen kann.

        Der Internet Explorer hat Probleme mit allen Attributen (z.B. id, style, class), die man auch anders ansprechen kann, hier über das style-Objekt.

        Ok div in p ist vielleicht nicht schön, man könnte dass Beispiel auch so umändern dass es direkt unter den body-tag sich einfügt.

        Es ist nicht nicht schön, sondern in HTML schlicht falsch.

        mfg
        Woodfighter

        1. Ok, ok, ok, ich gebe mich geschlagen.
          Nun habe ich das Testbeispiel so umgeändert, dass der div-Tag direkt unter den body-tag eingefügt wird.
          Nichtsdestotrotz, wird beim IExplorer ein javascript Fehler angezeigt, und zwar genau dort, wo versucht wird, das style Attribut hinzuzufügen.
          Mein Frage an euch:
          Wie kann ich das umgehen, um das gewünschte zu erreicht?
          Kann mir zufällig hier einer weiterhelfen.

          danke im voraus

          Gerd

          Hier das korrigierte Beispiel.

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>test</title>
          </head>
          <script language="JavaScript" type="text/javascript">
          <!--
          function test() {
              var newDIV = document.createElement("div");
              var Ausrichtung1 = document.createAttribute("id");
              Ausrichtung1.nodeValue = 'Layer1';
              var divid=Ausrichtung1.nodeValue;
              newDIV.setAttributeNode(Ausrichtung1);
              var Ausrichtung2 = document.createAttribute("style");
              Ausrichtung2.nodeValue = 'position:absolute; width:93px; height:94px; z-index:1; left:154px; top:90px; visibility: visible;';
              newDIV.setAttributeNode(Ausrichtung2);
              document.getElementsByTagName('body')[0].appendChild(newDIV)
              //document.getElementById(divid).setAttribute("style", Ausrichtung2.nodeValue);

          var newa = document.createElement("a");
              var Ausrichtung1 = document.createAttribute("href");
              Ausrichtung1.nodeValue = 'javascript:;';
              newa.setAttributeNode(Ausrichtung1);
              var Ausrichtung6 = document.createAttribute("id");
              Ausrichtung6.nodeValue ='a1';
              var aid=Ausrichtung6.nodeValue;
              newa.setAttributeNode(Ausrichtung6);
              document.getElementById(divid).appendChild(newa);

          var newtextlink = document.createTextNode('test');
              document.getElementById(aid).appendChild(newtextlink);
          }
          //-->
          </script>
          <body>
          <script language="JavaScript" type="text/javascript">
          <!--
              test();
          //-->
          </script>
          </body>
          </html>

          1. Tach,

            Nichtsdestotrotz, wird beim IExplorer ein javascript Fehler angezeigt, und zwar genau dort, wo versucht wird, das style Attribut hinzuzufügen.
            Mein Frage an euch:
            Wie kann ich das umgehen, um das gewünschte zu erreicht?
            Kann mir zufällig hier einer weiterhelfen.

            du könntest einfach lesen, was ich bereits geschrieben habe, Siechfried hat das ganze nochmal genauer ausgeführt.

            mfg
            Woodfighter

      2. Hi,

        Weil Du ein div in ein p einhängen willst?
        Achso, deshalb funktioniert es im Firefox wunderbar. Alles klar.

        Du hast gesehen, daß ich das mit einem Fragezeichen als Vermutung gekennzeichnet habe?

        Wenn du die kleine Beispielseite getestet hättest,

        Du hast keinen Link zu einer Beispielseite angegeben (Abgesehen davon, ich hab hier gar keinen IE) ...
        Und auch die Fehlermeldung selbst hast Du verschwiegen.

        Bei üblicher 0-basierter Zeilenzählung ist die von Dir genannte Zeile 17 diese hier:

        document.getElementById("divcontainer").appendChild(newDIV);

        Daher meine (durch das Fragezeichen als solche gekennzeichnete) Vermutung.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    2. Tag MudGuard.

      Folgende kleine Testseite unten, funktioniert einwandfrei im firefox, bringt aber im Internet Explorer in Zeile 17 einen Javascript-Error.
      Weil Du ein div in ein p einhängen willst?
      p darf kein div enthalten.

      Mag richtig sein, ist aber hier nicht das Problem, Javascript/DOM interessieren sich herzlich wenig für valides HTML. Das Problem wird von style verursacht, folgendes funktioniert problemlos:

      function test() {  
        var newDIV = document.createElement("div");  
        newDIV.id = 'Layer1';  
        newDIV.style.backgroundColor = 'red';  
        newDIV.style.width = '93px';  
        newDIV.style.height = '94px';  
        document.getElementById("divcontainer").appendChild(newDIV);  
      }
      

      Ursache ist der Versuch, style einen String zuzuweisen ("Member not found"). Der IE kennt nämlich die Eigenschaft HTMLObjekt.style nicht und wirft deshalb aus seiner Sicht konsequent die genannte Fehlermeldung (siehe MSDN: style-Property, unter Remarks). Also braucht man es im IE gar nicht erst zu versuchen, dem style-Attribut einen String zuzuweisen, sondern muss die einzelnen Eigenschaften des style-Objektes ändern (wie in meinem Beispiel) oder alternativ via HTMLObjekt.className eine Klasse mit den gewünschten Eigenschaften zuweisen.

      Siechfred

      1. super!, einwandfrei erklärt.

        Vielen, vielen Dank

      2. Hallo,

        Also braucht man es im IE gar nicht erst zu versuchen, dem style-Attribut einen String zuzuweisen, sondern muss die einzelnen Eigenschaften des style-Objektes ändern

        Man könnte DOM 2 CSS verwenden.
        newDIV.style.cssText = "background-color:red; width:93px; height:94px;";
        Das kann Opera allerdings noch nicht.

        oder alternativ via HTMLObjekt.className eine Klasse mit den gewünschten Eigenschaften zuweisen.

        Sowieso, weil man Präsentationsangaben und Scriptlogik immer trennen sollte.

        Mathias