Christopg: createAttribute-Problem

hi, ich habe folgendes problem

ich möchte folgendes erreichen -->

<tr>
  <td style="width: 160px;">Test</td>
</tr>

diese Tags möchte ich dynamisch (DOM) dazufügen. es funktioniert alles, bis auf das ich das style="width....  nicht setzen kann. ich habe dazu folgenden code -->

// alle notwendigen knoten erzeugen
var trNode1 = document.getElementsByTagName("tr")[0];
var tdNode1 = document.createElement("td");
var textNode1 = document.createTextNode("test");

// code für style setzen
var attrNode1 = document.createAttribute("style");
attrNode1.nodeValue = "width: 160px";
tdNode1.setAttributeNode(attrNode1);

// Knoten einhängen
tdNode1.appendChild(textNode1);
trNode1.appendChild(tdNode1);

sobald der code für das style setzen drinnen ist-funktioniert das ganze nicht mehr - was mache ich falsch - ich hab mich an die SELFHTML-DOKU gehalten

dort heisst es -->
var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(Ausrichtung);

meiner meinung nach mache ich nichts anders - oder habe ich was übersehen???

danke schon im voraus
mfg, christoph

  1. Hallo christoph

    diese Tags möchte ich dynamisch (DOM) dazufügen. es funktioniert alles, bis auf das ich das style="width....  nicht setzen kann. ich habe dazu folgenden code -->

    meiner meinung nach mache ich nichts anders - oder habe ich was übersehen???

    Ja hast du. Das klappt nur im NN6 und wahrscheinlich auch im IE 6.
    Siehe auch http://selfhtml.teamone.de/javascript/objekte/document.htm#create_attribute unter "Beachten Sie".

    Im NN 6 konnte ich dein Beispiel problemlos nachvollziehen.

    Viele Grüße

    Antje

  2. Hallo Christoph,

    // code für style setzen
    var attrNode1 = document.createAttribute("style");
    attrNode1.nodeValue = "width: 160px";
    tdNode1.setAttributeNode(attrNode1);

    Das scheint der IE nicht zu moegen, auch diese Schreibweise nicht (wohl aber Mozilla):
    tdNode1.setAttribute("style","width: 160px");

    Alternative fuer IE und Mozilla:
    tdNode1.style.width="160px";

    Hier mal ein Beispiel mit einem leeren Absatz, dem ein SPAN mit Text xyz hinzugefuegt wird, wobei dessen style.color und style.fontWeight gesetzt werden:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test by TM</title>
    </head>
    <script language="JavaScript" type="text/javascript">
    <!--

    function Test()
    {
    var doc=document.getElementsByTagName("p")[0];
    var neuelem = document.createElement("span");
    var neutxt = document.createTextNode("xyz");

    //Funktioniert so in Mozilla, aber nicht im IE6
    //neuelem.setAttribute("style","color: #FF0000; font-weight: bold");

    //Funktioniert in Mozilla und IE6
    neuelem.style.color="#FF0000";
    neuelem.style.fontWeight="bold";

    doc.appendChild(neuelem);
    doc.firstChild.appendChild(neutxt);
    }

    //-->
    </script>
    </head>
    <body onclick="Test()">

    <p>Absatz</p>

    </body>
    </html>

    Vielleicht kannst Du das als Workaround gebrauchen.

    MfG, Thomas

    1. Nachtrag:

      <p>Absatz</p>

      Den Absatz leer lassen, also <p></p>, sonst ist firstChild der Textinhalt. War beim Testen stehen geblieben.

      MfG, Thomas