Attribute einem neuen Element hinzufügen

[littleHtml Freak]

hallo habe diesen code mehr oder weniger von selfHTML kopiert aber es funktioniert nur das erstellen des div und die zuweisung der klasse :( rest geht nicht! mein valiator zeigt keine fehler an...
weiß wer warum es nicht geht?

function p_hinzufuegen(id,x,y){
//TAG     
         var p = document.createElement("p");
         var ausgabeort = document.getElementById("spielfeld");
         ausgabeort.appendChild(p);
//ID
         var name = document.createAttribute("id");
         name.nodeValue = "0";
         var element = document.getElementsByTagName("p")[0];
         element.setAttributeNode(name);
//CLASS

         var klasse = document.createAttribute("class");
         klasse.nodeValue = "punkt";
         var element2 = document.getElementsByTagName("p")[0];
         element2.setAttributeNode(klasse);
//POSITION 
         var position = document.createAttribute("position");
         position.nodeValue = "absolute";
         var element3 = document.getElementsByTagName("p")[0];
         element3.setAttributeNode(position);
//LEFT
         var links = document.createAttribute("left");
         links.nodeValue = x;
         var element4 = document.getElementsByTagName("p")[0];
         element4.setAttributeNode(links);
//TOP
         var oben = document.createAttribute("top");
         oben.nodeValue = y;
         var element5 = document.getElementsByTagName("p")[0];
         element5.setAttributeNode(oben);
         

}

viele grüße simon
PS: es geht auch hardcoded nicht

 

[struppi]

Die meisten Attribute kannst du dem Objekt direkt zuweisen.

function p_hinzufuegen(id,x,y){
//ID
         var element = document.getElementsByTagName("p")[0];
         element.id = '0' // ist aber eine ungültige ID
//CLASS

         var element2 = document.getElementsByTagName("p")[0];
         element2.className = 'punkt'; // class ist ein reserviertes Wort
//POSITION 
         var element3 = document.getElementsByTagName("p")[0];
         element3.style.position = 'absolute'; // Das ist eine CSS Angabe
//LEFT
         var element4 = document.getElementsByTagName("p")[0];
         element4.style.left = x + 'px'; // CSS und der Wert braucht immer eine Einheit
}

 

[littleHtml Freak]

klar^^ das sind ja alles werte von style... dummer denkfehler
jetzt gehts; habs so gelöst:

var position = document.createAttribute("style");
         position.nodeValue = "position: absolute; left: "+x+"px; right: "+y+"px;";
         var element3 = document.getElementsByTagName("p")[0];
         element3.setAttributeNode(position);

was sind denn verbotene id namen? darf ich keine zahlen nehmen?!

 

[littleHtml Freak]

zur ergänzung und falls das irgendwer mal verwenden möchte:
wenn das erstellte element nicht immer wieder gelöscht werden soll, wenn die funktion erneut aufgerufen wird, muss in die eckigen klammern eine variable die bei jedem neuen aufruf einen anderen wert hat

die frage was für id namen ich nicht nehmen kann steht noch
gruß

 

[struppi]

Ein style Attribut erstellen ist nicht sinnvoll, da jedes Element automatisch ein style Attribut schon hat, wie gesagt du kannst direkt auf die Eigenschaften zugreifen und solltest das auch tun. Die createAttribute Funktion brauchst du i.d.R. nicht.

ID dürfen nur mit einem Buchstaben beginnen, alles weitere steht da:
Basic HTML data types
(für HTML5 gelten etwas erweiterte Regeln 3.2 Elements — HTML5)

 

[littleHtml Freak]

ok danke! habe jetzt für den id-wert "num"+id das geht