Chräcker Heller: (DOM) dynamisch erzeugte Div ansprechen

Hallo,

ich schmeisse mich gerade in die Knotenwelt, was für ein (spannendes) Umdenken. (nicht daß mir durch CSS-lernen langweilig gewesen wäre ;-))

Ich erzeuge dynamisch ein mit Text gefülltes Div, und zwar so: (wobei im Body ein span-Tag den Namen "hierhin" hat....)

meindiv=document.createElement("div");
meintext = document.createTextNode("Testlauf");
meindiv.appendChild(meintext);
document.getElementById("hierhin").appendChild(meindiv);

zwar macht mich das funktionieren (und verstehen) schon mächtig stolz ;-) aber leider will es mir nicht gelingen, dieses neue div zwecks dynamischen positionieren anzusprechen. Blauäugig dachte ich, folgende Art wäre eine gute Idee:

document.getElementById(meindiv).style.top=50;

aber da bekomme ich nur ein

document.getElementById(meindiv) has no properties

(in meiner css-Deklaration positioniere ich "alle" divs von Haus aus schon auf absolute und einem top und left-Wert, aber auch hier meine Frage, wie ich eigendlich das "absolute Positionieren" dynamisch erzeugen könnte....)

Danke,

Chräcker

PS. hören sich meine Fragen nur für mich immer so simpel an? ich kann wahre Forums-Neulinge schon manchmal verstehen ;-))))

  1. hi

    meindiv=document.createElement("div");
    meintext = document.createTextNode("Testlauf");
    meindiv.appendChild(meintext);
    document.getElementById("hierhin").appendChild(meindiv);

    document.getElementById("hierhin").lastChild isser

    gruss Kai

    1. Wahnsinn ;-)

      ich meinte gerade aus Scherz zu meiner Frau, "komm, ich geh mal ins Forum und frage in einem neuen Thread, warum noch keiner geantwortet hat" ;-))) nichts ist einem vergönnt ;-))

      Aber leider bekommen Fragen so schnell Junge....

      document.getElementById("hierhin").lastChild isser

      Ich erstelle über eine Schleife mehrere Divs. Innerhalb der Schleife kann ich also "sofort" nach der Erstellung über den letzten Kind-Knoten auf dessen Eigenschaften (hier Position) zugreifen, und, so denke ich mir, einen eventhandler setzen. (jaja, meine Frage von weiter unten ;-))

      Dann würde ich, so denke ich mir, beim auslösen eines "click" Event meine Mauskoordinaten bekommen, aber wie erfahre ich, auf welchen der inzwischen vielen Kindknoten da geklickt wurde? Oder denke ich vollkommen falsch? (abgesehen von grundsätzlichen Fragen wie, ist so viel JS sinnvoll etc ;-)))))

      Ich möhcte "eigendlich" nur, wie schon gescehehn, dynamisch Divs erzeugen und dann nachträglich die vom besucher bewegen lassen 8und dabei den z-Index verändern lassen....) - fast simples drag-und-drop..... Und Atribute kann ich den Knoten ja in IE5.5 nicht dynamisch geben (jaja, blöder Browser, ich weiß....)

      Danke mal wieder....
      Chräcker

      (ich sollte doch Englisch lernen, ich argwöhne, daß mir langsam wirklich viele guten Quellen flöten gehen.....)

      1. Hallo,

        versuche ich die Maus-Click-Überwachung mit:

        document.getElementById("hierhin").lastChild.addEventListener("click", angeklickt, true);

        anzuschupsen, findet er ihn auch nicht. (Oh je, ich glaube, ich sollte doch was anderes machen ;-) )

        Danke da draußen....
        Chräcker

        1. Hallo,

          ich geh ins Bett ;-/ der Eventhandler funktioniert natürlich doch, man muß nur den richtigen Browser nehmen (flööööt)...

          bei der vorigen Kinds-Frage ;-) freue ich mich aber noch auf Hilfe ;-)))

          Chräcker

      2. hi

        Ich erstelle über eine Schleife mehrere Divs. Innerhalb der Schleife kann ich also "sofort" nach der Erstellung über den letzten Kind-Knoten auf dessen Eigenschaften (hier Position) zugreifen, und, so denke ich mir, einen eventhandler setzen. (jaja, meine Frage von weiter unten ;-))

        da würde ich dem neuerstellten <div> so schnell wie möglich eine id="" geben

        gruss Kai

        1. Moin,

          da würde ich dem neuerstellten <div> so schnell wie möglich eine id="" geben

          Entweder das, oder die einfache Methode: In meindiv hast du doch schon eine schöne Referenz auf das neue div, was anderes kriegst du mit document.getElementById("diegradezugewieseneIDfürmeindiv") auch nicht. Also pack dir die mit createElement() angelegten Objekte griffbereit parat - etwa in ein Array - und hab dann damit Spaß.

          Was das rausfinden des von dem Event betroffenen Elements angeht: Wenn Microsoft bei der Implementierung der Event-Objekte selber keinen solchen Mist wie bei der EventListener-Registrierung verzapft hat sollten die ein Attribut namens target haben in dem sich eine Referenz auf das Element dass Ziel des Events war befindet. Selbst wenn du hier nicht auf Referenzgleichheit mit deinen vorher in deinem Array gesicherten Objekten prüfen können solltest (wovon ich eigentlich ausgehe), kannst du doch zumindest dieses target-Attribut wie ein stinknormales Objekt, das auch aus getElementById() gekommen sein könnte, behandeln und es direkt durch die Gegend positionieren.

          Um die nächste Frage gleich vorwegzunehmen: Wenn deine DIVs irgendwelchen Inhalt haben, kann es sein dass tatsächlich das Element auf dass der User geklickt hat im target landet und nicht dein umgebendes div. Dann schau mal in currentTarget nach, das sollte das Element enthalten dessen Eventverarbeitung deinen Handler aufgerufen hat, also das div dass du mit attachEvent() bzw addEventListener() traktiert hast.

          Genau diese Vorgehensweise, dass das Skript zum Verschieben der divs also gar nicht weiss auf welche Elemente es ursprünglich angesetzt wurde sondern nur mit dem target des Events rumspielt, habe ich auch schon in mindestens einem Tutorial zu dem Thema gesehen.

          (ich sollte doch Englisch lernen, ich argwöhne, daß mir langsam wirklich viele guten Quellen flöten gehen.....)

          Stimmt: Fast alle deine Fragen werden durch http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113 restlos beantwortet (hach, bin ich heute gemein ;-)

          --
          Henryk Plötz
          Grüße von der Ostsee

          1. Hallo,

            beantwortet (hach, bin ich heute gemein ;-)

            nö, im Gegenteil, ich habe mir mein Englischbuch bereit gelegt und die Seite gemerkt. Vorher werde ich aber die in Deinem Posting genannten Stcihworte "aberforschen"....

            Hoffe, ich kann jetzt etwas Ruhe geben ,-)))

            Danke,

            Chräcker

        2. Hallo,

          da würde ich dem neuerstellten <div> so schnell wie möglich eine
          id="" geben

          ja, "natürlich", aber geht das nicht über createAttribute()? und das geht beim IE5.5 nicht. Oder gibt es da eine andere Methode Dinge in den dynamisch erzeugten html-Tag reinzuschreiben (also direkt in das Tag, um das mal umgangssprachlich zu formulieren ;-))

          Chräcker

          1. Moin,

            ja, "natürlich", aber geht das nicht über createAttribute()? und das geht beim IE5.5 nicht. Oder gibt es da eine andere Methode Dinge in den dynamisch erzeugten html-Tag reinzuschreiben (also direkt in das Tag, um das mal umgangssprachlich zu formulieren ;-))

            Wie jetzt, der IE kann nicht mal createAttribute()? Das's ja schwach...
            Wie dem auch sei, laut http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#div haben div-Objekte die Universaleigenschaften von http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften und da ist rein zufällig auch eine Eigenschaft id dabei die du nach Herzenslust beschreiben kannst.

            --
            Henryk Plötz
            Grüße von der Ostsee

  2. Hallo,

    sorry, aber die Antworten bringen mich wirren Geist immer nur ein stückel weiter, aber die Frage, wie ich ein dynamisch erzeigtes Div neu positionieren kann, nachdem iche s angeklickt habe, will sich mir nicht beantworten. (jetzt mal nur beim mozilla)

    Ich habe die Mausüberwachung per addEventListener für jedes meiner mehrerer Divs aktiviert. Per e.currentTarget bekomme ich lediglich gesagt, das es sich um ein objektHTMLDivelement handelt. Ich kann auch nicht, wie ich dachte, per

    ziel=e.currentTarget;
    document.getElementById(ziel).style.top = 0;

    den top Wert (z,Bsp.) auf 0 setzen.

    Inzwischen haben alle Div-bereiche eine ID, ich könnte also schon per ID auf die Divs zugreifen, aber ich weiß ja eben nicht, welches angeklickt wurde. Vielleicht erbarmt sich ja doch eine Seele und findet eine meinem Hirn zugängliche Antwort.... ;-)))

    Chräcker

    1. Moin,

      Ich habe die Mausüberwachung per addEventListener für jedes meiner mehrerer Divs aktiviert. Per e.currentTarget bekomme ich lediglich gesagt, das es sich um

      ein objektHTMLDivelement handelt.

      Genau, jetzt vergleich mal  alert(e)  mit  alert(document.getElementById("irgendeineexistierendeid"))  . Na, dämmerts?

      Ich kann auch nicht, wie ich dachte, per

      ziel=e.currentTarget;

      Ziel ist jetzt ein _Objekt_.

      document.getElementById(ziel).style.top = 0;

      Hier wird für ziel ein _String_ erwartet, nämlich die ID des Objektes dass du haben willst. Du könntest natürlich document.getElementById(ziel.id).style.top = 0; nehmen, aber das richtig schöne wäre ziel.style.top = 0;

      Das ist ja das schöne an diesem target bzw. currentTarget: Es ist ein DOM-Objekt mit dem du alles anstellen kannst, und das wollte ich in meinem Post unten auch eigentlich ausdrücken.

      --
      Henryk Plötz
      Grüße von der Ostsee

      1. Hallo Henryk ,

        1000 Dank für diese abschliessende Erklärung, für die Geduld und das Du hier unten noch "Nachsorge" betrieben hast. Jetzt funktionierts, und langsam kann ich es in meinem Hirn nachsortieren. Das eigenartige ist, das ich genau dieses:

        ziel.style.top = 0;

        "auch" probierte (weils mir logisch erchien), es aber nicht funktionierte. Jetzt nehme ich an, daß ich "ziel" mit e.target anstelle e.currentTarget gefüllt habe.

        Das:

        document.getElementById(ziel.id).style.top = 0;

        war mir neu. Es ist echt blöd, ohne Englischkenntnisse da Material für zu finden. Auf selfhtml9 mag ich natürlich nicht warten, und meine Versuche bei google mir eine Deutsche Seite zu DOM-Level2 zu finden scheiterten kläglich...

        Jetzt kann ich den Wissensknäul weiter aufrollen, es funktioniert...

        Danke, hab viel gelernt...

        Chräcker