Thomas: Frage zu insertBefore

Hallo,

ich bin gerade dabei mich mit insertBefore herumzuärgern :-)

Ich habe vor, vor <body> ein div container zu erstellen und vor diesem container einen weiteren DIV Container. Lange Rede kurzer Sinn, es sollte so aussehen:

var body = document.getElementsByTagName("body").item(0);
var Nachricht = document.createElement("div");

Nachricht.setAttribute('id', NachrichtID);

body.insertBefore(Nachricht , body.firstChild);

Ich bin mir nur nicht sicher ob insertBefore richtig arbeitet, ich kann das ganze leider auch nicht kontrollieren. Wie müsste eine erweiterung aussehen damit ein zweiter Container hinter dem DIV Container ensteht?

Das ganze sollte wenn es fertig ist so aussehen:

<body>
 <div id="Nachricht">
 <div id="layer">

Muss ich das ganze nochmal ausführen mit item(1) ? Wenn ja, wird mit item(1) der zuvor erstellte Container berücksichtigt oder nicht? Da bin ich mir nicht ganz sicher.

--
lg tommi
  1. hi,

    Ich habe vor, vor <body> ein div container zu erstellen und vor diesem container einen weiteren DIV Container.

    Nein, hast du nicht. Ausserhalb von Body hat ein Div nichts verloren.

    Das ganze sollte wenn es fertig ist so aussehen:

    <body>
    <div id="Nachricht">
    <div id="layer">

    Na also, willst du sie doch nicht _vor_ body einfügen.
    Stattdessen vielleicht vor dessen firstChild?

    Muss ich das ganze nochmal ausführen mit item(1) ? Wenn ja, wird mit item(1) der zuvor erstellte Container berücksichtigt oder nicht? Da bin ich mir nicht ganz sicher.

    Wie meinen?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Naja du siehst ja die Struktur...

      <body>
      <div id="Nachricht">
      <div id="layer">

  2. Hallo Thomas.

    var body = document.getElementsByTagName("body").item(0);
    var Nachricht = document.createElement("div");

    Nachricht.setAttribute('id', NachrichtID);

    body.insertBefore(Nachricht , body.firstChild);

    Kürzer:

    var Nachricht = document.body.insertBefore(document.createElement('div'),  
                                               document.body.firstChild);  
        Nachricht.id = "NachrichtID";  
      
    var Layer = Nachricht.appendChild(document.createElement('div'));  
        Layer.id = "layer";
    

    Die Methoden insertBefore und appendChild geben praktischerweise eine Referenz auf den eingefügten Elementknoten zurück, worüber du unkompliziert direkt darauf zugreifen kannst.

    Ich bin mir nur nicht sicher ob insertBefore richtig arbeitet, ich kann das ganze leider auch nicht kontrollieren. Wie müsste eine erweiterung aussehen damit ein zweiter Container hinter dem DIV Container ensteht?

    Der Begriff „hinter“ ist hier sehr dehnbar. Soll div#layer innerhalb von div#Nachricht (wie oben beschrieben) oder im Dokumentenbaum danach, quasi als Nachbar eingefügt werden?

    Einen schönen Mittwoch noch.

    Gruß, Mathias

    --
    ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
    debian/rules
    1. Danke Mathias für deine Antwort.

      Das ganze sieht normal so aus:

      <body>

      <div id="main"></div>

      </body>

      und sollte wenn es fertig ist so aussehen:

      <body>

      <div id="layer"></div>
      <div id="nachricht"></div>

      <div id="main"></div>

      </body>

      ich habe es leider nocht nicht ganz hinbekommen...

      --
      lg thomas
      1. Hallo Thomas.

        Danke Mathias für deine Antwort.

        Das ganze sieht normal so aus:

        <body>

        <div id="main"></div>

        </body>

        In diesem Falle solltest du besser direkt div#main referenzieren, um davor die weiteren Elemente einzufügen. Hier mag es nur Whitespace sein, doch ansonsten kannst du nie wissen, was firstChild denn wirklich ist.

        und sollte wenn es fertig ist so aussehen:

        <body>

        <div id="layer"></div>
        <div id="nachricht"></div>

        War die Reihenfolge nicht eben noch anders herum? Und auch die ID des zweiten div-Elementes ist nun anders.

        <div id="main"></div>

        </body>

        ich habe es leider nocht nicht ganz hinbekommen...

        Mein Codebeispiel sollte dir nun aber weiterhelfen. An Stelle von „Nachricht.appendChild“ rufst du hier eben ein weiteres Mal „document.body.insertBefore“ auf und verwendest das in „Nachricht“ referenzierte und bereits eingefügte Elementobjekt als zweiten Parameter für insertBefore.

        Einen schönen Mittwoch noch.

        Gruß, Mathias

        --
        ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
        debian/rules
        1. Naja Namen sind wie schall und rauch :-)

          Ähmm, das hinter dem <body> ein <div> tag kommt ist in meinem fall immer klar!

          Zwischen <body> und <div> steht nix anderes.

          Ich habe das ganze nun so gelöst:

          var body = document.getElementsByTagName("body").item(0);

          var privateNachricht = document.createElement("div");
          var overlay = document.createElement("div");

          Nachricht.setAttribute('id',Nachricht);
          overlay.setAttribute('id','overlay');

          body.insertBefore(Nachricht, body.firstChild);
          body.insertBefore(overlay, body.firstChild);

          Ich weiß aber nicht ob das richtig ist. Ist es nicht machbar den erstellten neuen code irgendwie anzusehen?

          --
          lg thomas
          1. Hallo,

            Ich weiß aber nicht ob das richtig ist. Ist es nicht machbar den erstellten neuen code irgendwie anzusehen?

            Doch Natürlich. Der Firefox (und der Internet-Explorer glaub ich auch) haben dafür den DOM-Inspektor, im Firefox kannst du es dir auch noch einfacher machen und einfach alles auswählen->Rechtsklick->Auswahlquelltext anzeigen. Wobei der DOM-I natürlich komformabler ist und viel mehr Funktionen hat.

            Jonathan

            1. Auswahlquelltext? Ist das ein plugin?

              1. Hallo,

                Auswahlquelltext? Ist das ein plugin?

                Nein, das ist standardmäßig integriert. Allerdings bin ich mir nicht sicher, dass es wirklich so heißt. Ich hab hier nur die englische Version, da heißt es "View Selection Source". Wichtig ist eben nur, dass du was markiert hast.

                Jonathan

                1. Hallo,

                  Auswahlquelltext

                  […] Allerdings bin ich mir nicht sicher, dass es wirklich so heißt.

                  Fast richtig:

                  (Strg+a drücken) > Rechtsklick > Auswahl-Quelltext anzeigen

                  Wobei ich den DOM-Inspector auch vorziehen würde. Eine Konvertierung des DOM nach (X)HTML ist ja nicht verlustfrei möglich.

                  mfg. Daniel

          2. Hallo,

            var body = document.getElementsByTagName("body").item(0);

            kennt jeder Browser diese item()-Funktion? oder wäre es so sicherer?

              
            var body = document.getElementsByTagName("body")[0];  
            
            

            ... Ist es nicht machbar den erstellten neuen code irgendwie anzusehen?

            alert(body.innerHTML);

            Gruß plan_B

            --
                 *®*´¯`·.¸¸.·
            1. hi,

              var body = document.getElementsByTagName("body").item(0);

              kennt jeder Browser diese item()-Funktion? oder wäre es so sicherer?

              var body = document.getElementsByTagName("body")[0];

                
              Einfacher wäre es in diesem Fall, einfach document.body anzusprechen - das versteht m.W. jeder DOM-fähige Browser.  
                
              gruß,  
              wahsaga  
                
              
              -- 
              /voodoo.css:  
              #GeorgeWBush { position:absolute; bottom:-6ft; }