DOM: Wie setzte ich Attribute bei neu erzeugten Elementen

[Gizmo]

Hallo,

ich habe ein kleines Problem. Ich muss in einer bestehende Tabelle noch ein paar Zeilen hinzufügen und diesen Zeilen ein paar Elemente (Bild, Link etc.) einfügen. Nun habe ich das Problem, dass ich das nicht schaffe.

Im Moment hänge ich bei den Attribut-Merkmalen für die Elemente IMG:

Das Script läuft soweit und erstellt mir eine neue TR und eine neue TD (im Bereich ID sub3). Zu dem TD Tag füge ich Class="nav03" hinzu, was auch einwandfrei funktioniert.

Jetzt möchte ich ein Bild erzeugen was auch noch funktioniert, aber bei dem hinzufügen der Informationen für das Bild komme ich nicht weiter.

Ich habe bereits einiges versucht, da aber das neue Element keine ID hat,weiß ich nicht wie ich darauf zugreifen soll.

Hier das Script. Bis auf die letzten 3 Zeilen geht es auch einwandfrei:

var Zeile = 0;
function NeueReihe () {

var TR = document.getElementById("sub3").insertRow(Zeile);
    Zeile += 1;
    var TD1 = document.createElement("td");
    var TD1text = document.createTextNode('Test');
    TD1.appendChild(TD1text);
    TR.appendChild(TD1);

var StyleGuide = document.createAttribute("class");
  StyleGuide.nodeValue = "nav03";
  document.getElementById("sub3").lastChild.setAttributeNode(StyleGuide);

var Linie = document.createElement("img");
    TD1.appendChild(Linie);

var LinieSRC = document.createAttribute("src");
  LinieSRC.nodeValue = "/mainfiles/spacer_transparent.gif";

TDBereich = document.getElementById("sub3");
  IMGBereich = TDBereich.getElementsByTagName("img");

IMGBereich.setAttributeNode(LinieSRC);
// Hier kommt die Fehlermeldung das das Objekt die Methode nicht unterstützt.

}

[molily]

Hallo,

IMGBereich = TDBereich.getElementsByTagName("img");

getElementsByTagName gibt eine Liste mit Elementknoten zurück. Wenn du nur den ersten Knoten in dieser Liste ansprechen willst, dann kannst du diesen über TDBereich.getElementsByTagName("img")[0] ansprechen.

IMGBereich.setAttributeNode(LinieSRC);
// Hier kommt die Fehlermeldung das das Objekt die Methode nicht unterstützt.

Eine Knotenliste hat natürlich keine solche Methode.

Was das Setzen von Attributen generell angeht: Vergiss createAttribute und setAttributeNode. Das ist unnötig umständlich und der IE hat damit einige Probleme. Du kannst alle Attribute direkt über Eigenschaften des Elementknotens setzen:

element.className = "nav03";
element.src = "/mainfiles/spacer_transparent.gif";
usw.

Mathias

[Gizmo]

Hallo,

danke! Hab das Problem auch shcon gefunden gehabt und es funkioniert soweit sehr gut. Jetzt habe ich nur noch ein Problem. Ich kann meinen (inzwischen DIVs) leider keine "onmouseover" und "onmouseout" befehle setzten lassen.

Er macht alles andere ohne Probleme, nur hier hängt es jetzt halt :(

[code start]
    var TD1 = document.createElement("div");
    document.getElementById(elementbase).appendChild(TD1);
    ids += 1;
    var subid = "subid" + ids;
  var GetIDN = document.createAttribute("id");
  GetIDN.nodeValue = subid;
  document.getElementById(elementbase).lastChild.setAttributeNode(GetIDN);

var StyleGuide = document.createAttribute("class");
  StyleGuide.nodeValue = "nav03extra";
  document.getElementById(subid).setAttributeNode(StyleGuide);

var DivScript = document.createAttribute("OnMouseOver");
  DivScript.nodeValue = "over02(this);";
  document.getElementById(subid).setAttributeNode(DivScript);
[code ende]

[wahsaga]

hi,

Jetzt habe ich nur noch ein Problem. Ich kann meinen (inzwischen DIVs) leider keine "onmouseover" und "onmouseout" befehle setzten lassen.

Mathias sagte dir im vorherigen Posting doch:

Was das Setzen von Attributen generell angeht: Vergiss createAttribute und setAttributeNode.

var TD1 = document.createElement("div");
  var GetIDN = document.createAttribute("id");
  GetIDN.nodeValue = subid;
  document.getElementById(elementbase).lastChild.setAttributeNode(GetIDN);

Warum dieser umständliche Zugriff über ID des Elternelements und lastChild?
Du hast dir das Element gerade erst erzeugt, und hast seine Referenz damit immer noch in TD1 vorliegen.

TD1.id = subid;

var StyleGuide = document.createAttribute("class");
  StyleGuide.nodeValue = "nav03extra";
  document.getElementById(subid).setAttributeNode(StyleGuide);

Du hast die Referenz auf das Element immer noch vorliegen, du hast es ja gerade erst erzeugt - wieso jetzt schon wieder getElementById?

Und bitte nicht schon wieder den createAttribute/setAttribute-Zirkus -
TD1.className = "nav03extra";
und gut is'.

var DivScript = document.createAttribute("OnMouseOver");
  DivScript.nodeValue = "over02(this);";
  document.getElementById(subid).setAttributeNode(DivScript);

TD1.onmouseover = "over02";

gruß,
wahsaga

[Gizmo]

Danke für die Antwort, nur leider funktioniert es immer noch nicht. Das Script ist jetzt zwar natürlich kürzer geworden, aber auch nicht mehr....

....
    var TD1 = document.createElement("div");
    document.getElementById(elementbase).appendChild(TD1);
    ids += 1;
    var subid = "subid" + ids;
    TD1.id = subid;
   TD1.className = "nav03extra";
    TD1.onmouseover = "over02(this)";
    TD1.onmouseout = "out02(this)";
    TD1.onclick = "linkme('test.html')";
...

Die onmouserover events gehen alle nicht.... :(

[molily]

Hallo,

Die onmouserover events gehen alle nicht.... :(

Wahrscheinlich beziehst du dich auf den Internet Explorer, der hat einige Eigenheiten.

TD1.onmouseover = "over02(this)";
    TD1.onmouseout = "out02(this)";

Im IE musst du die Funktionsobjekte in den Attributen speichern, keine Strings:

TD1.onmouseover = over02;
TD1.onmouseout = out02;

In over02 und out02 kannst du dann über this auf den Elementknoten zugreifen (weil die Handler im Kontext der Elementknoten ausgeführt werden bzw. weil sie Methoden dieses Objektes sind).

http://www.quirksmode.org/js/this.html

TD1.onclick = "linkme('test.html')";

Das ist schon schwieriger. Entweder:

TD1.onclick = fuction () { linkme("test.html"); };

(Function-Expression, das heißt eine anonyme Funktion als Hülle)

Oder:

TD1.link = "test.html";
TD1.onclick = linkme;
function linkme () {
   alert(this.link);
}

(Den String einfach am td-Elementobjekt speichern, also eine neue Eigenschaft hinzufügen. Im Event-Handler dann darauf zugreifen.)

Mathias

[Gizmo]

Vielen Vielen Dank ;)
Funktioniert einwandfrei ;)

[molily]

TD1.onclick = fuction () { linkme("test.html"); };

Das sollte natürlich »function« heißen.