left/top nach createElement setzen

[SQLer]

Ich möchte anhand eines eingelesenen XML Dokuments dynamisch ein DIV erzeugen, das klappt auch:
var e = document.createElement("div");

dem möchte ich nun allerdings eine absolute position zuweisen, das klappt nicht:
e.style.left = 50px;
e.sytle.top = 50px;

wie muss ich die werte setzen?

muss ich zum schluss das element appenden?
document.appendChild(e);

Grüsse

[Mathias Brodala]

Hallo SQLer.

Ich möchte anhand eines eingelesenen XML Dokuments dynamisch ein DIV erzeugen, das klappt auch:
var e = document.createElement("div");

dem möchte ich nun allerdings eine absolute position zuweisen, das klappt nicht:
e.style.left = 50px;
e.sytle.top = 50px;

Klar, die Variable „50px“ ist ja auch nicht definiert und kann sie syntaktisch auch nicht. Du möchtest sicher Anführungszeichen für den Wert verwenden.

wie muss ich die werte setzen?

muss ich zum schluss das element appenden?
document.appendChild(e);

Damit würdest du dieses Element direkt neben das html-Element setzen. Du möchtest das Element also eher an document.body oder etwas Vergleichbares anhängen.

Einen schönen Montag noch.

Gruß, Mathias

[SQLer]

Hi,

Klar, die Variable „50px“ ist ja auch nicht definiert und kann sie syntaktisch auch nicht. Du möchtest sicher Anführungszeichen für den Wert verwenden.

Das war wohl ein wenig unüberlegt von mir gepostet. Ich möchte das so machen:
for(var i=0; i<pits.length; i++){
        var t = pits[i].getElementsByTagName("text")[0].firstChild.data;
        var x = pits[i].getElementsByTagName("x-position")[0].firstChild.data;
        var y = pits[i].getElementsByTagName("y-position")[0].firstChild.data;
        var e = document.createElement("div");
        var cssClass = document.createAttribute("class");
        cssClass.nodeValue = "postit";
        e.stlye.left=x+ "px";
        e.stlye.top=y+ "px";

»»setzen. Du möchtest das Element also eher an document.body oder etwas Vergleichbares anhängen.
Ist das so korrekt?
        e.setAttributeNode(cssClass);
        document.body.appendChild(e);
    }

Gruß, Mathias

Gruss und einen sschönen Abend
SQLer

[Mathias Brodala]

Hallo SQLer.

Hi,

Klar, die Variable „50px“ ist ja auch nicht definiert und kann sie syntaktisch auch nicht. Du möchtest sicher Anführungszeichen für den Wert verwenden.
Das war wohl ein wenig unüberlegt von mir gepostet. Ich möchte das so machen:
[…]
        ~~~javascript

var e = document.createElement("div");

var cssClass = document.createAttribute("class");
        cssClass.nodeValue = "postit";
// […]
        e.setAttributeNode(cssClass);
// […]
        e.stlye.left=x+ "px";
        e.stlye.top=y+ "px";

  
Die Klasse kannst du weitaus einfacher und clientübergreifender(erer) festlegen:  
  
~~~javascript
var e = document.createElement("div");  
    e.className = "postit";

Du möchtest das Element also eher an document.body oder etwas Vergleichbares anhängen.
Ist das so korrekt?
        […]
        ~~~javascript

document.body.appendChild(e);

}

  
Ja. Bedenke nur, dass du dies natürlich erst dann machen kannst, wenn das Dokument fertig geladen wurde, da es ja sonst zum Zeitpunkt der Scriptausführung noch gar kein body-Element gibt, an welches das div-Element angehangen werden soll. Arbeite also so:  
  
~~~javascript
window.onload = function() {  
  
 // Dein Code  
};

Einen schönen Montag noch.

Gruß, Mathias

[SQLer]

Die Klasse kannst du weitaus einfacher und clientübergreifender(erer) festlegen:

var e = document.createElement("div");

e.className = "postit";

  
Hehe ok das ist komfortabler :)  
  

> > > Du möchtest das Element also eher an document.body oder etwas Vergleichbares anhängen.  
> > Ist das so korrekt?  
> >         […]  
> >         ~~~javascript

document.body.appendChild(e);  

> >     }

Ja. Bedenke nur, dass du dies natürlich erst dann machen kannst, wenn das Dokument fertig geladen wurde, da es ja sonst zum Zeitpunkt der Scriptausführung noch gar kein body-Element gibt, an welches das div-Element angehangen werden soll. Arbeite also so:

Hi, danke für den Tipp, das hatte ich nicht bedacht.

Jedoch sollte der body geladen sein. Im onload eventhandler rufe ich mithilfe von prototype einen Ajax-Request auf welcher mir ein xml lädt. Mit den daten aus dem xml möchte ich dann jeweils ein div erstellen.

Vielen Dank

Gruss SQLer