dynamisch erzeugtes treeview

[Mambo]

Hallo, ich komme nicht mehr weiter, daher frage ich hier um rat.

in meiner html-datei steht ein div (id="tree").

ich möchte in einer JS-Schleife folgendes machen:

Schritt 1:
erzeuge ein div(id="id_1") und hänge es an div("tree")

2ter Schleifendurchlauf:
finde das div(id="id_1") und hänge weiteres div(id="id_2") an das div(id="id_1).

An das "feste" div(id="tree") aus der html file werden die dynamisch erzeugten divs problemlos angehangen.
die divs die ich jedoch in der schleife erst erzeuge, werden zwar gefunden, aber es kann da leider nichts angehangen werden.

Hat jemand eine Idee wie ich das Problem beheben kann?

Ich vermute mal, ich muss erst alle div-Elemente erzeugen und aneinander hängen und dann erst an das tree-div hängen?

Bsp:

var IDarray = new Array("tree", "id_1", "id_2");

for(var i=0; i<3; i++){
var toAppend = document.getElementById(IDarray[i]);
var ele = document.createElement("div");
ele.setAttribute("id", IDarray[i]+"x");

toAppend.appendChild(ele);
}

hierbei würde das erste div an das div-tree angegangen werden, aber an das div-id_1 würde eben NICHT das div-id_2 angehangen...

danke für hilfe!

[ChrisB]

Hi,

Schritt 1:
erzeuge ein div(id="id_1") und hänge es an div("tree")

2ter Schleifendurchlauf:
finde das div(id="id_1") und hänge weiteres div(id="id_2") an das div(id="id_1).

Da du das Div-Element mit der ID id_1 gerade eben erst erzeugt hast, musst du es nicht erst "finden" - die erzeugende Methode hat dir doch bereits die Referenz darauf zurueckgegeben.

ele.setAttribute("id", IDarray[i]+"x");

setAttribute sollte vermieden werden, weil im IE oftmals problematisch.

elementReferenz.attributName = wert;
tut's i.a.R. genauso gut bzw. besser.

MfG ChrisB

[Mambo]

Da du das Div-Element mit der ID id_1 gerade eben erst erzeugt hast, musst du es nicht erst "finden" - die erzeugende Methode hat dir doch bereits die Referenz darauf zurueckgegeben.

ele.setAttribute("id", IDarray[i]+"x");

setAttribute sollte vermieden werden, weil im IE oftmals problematisch.

elementReferenz.attributName = wert;
tut's i.a.R. genauso gut bzw. besser.

MfG ChrisB

Danke für die Antwort! Habe die Objektreferenz jetzt immer im Array gespeichert.
So kann ich in der aktuellen Arrayposition (wo auch der Vorgänger des aktuellen elements drin steht) das Vorgänger element im Array suchen (anhand der ID) und dann an das div anhängen, dass in dem array an dieser Stelle gespeichert ist.

so kann ich eben auch beliebig verschachtelte XML-Dokumente in das TreeView bauen.

Es ist allerdings extrem gut möglich, dass meine Lösung sehr umständlich ist, habe wenig Erfahrung in JS, beschäftige mich aber momentan extrem viel damit. Da kann es schonmal sein, dass meine Ideen ein wenig ungewöhnlich/umständlich sind.

Prinzipiell durchlaufe ich das XML-DOK und erzeuge ein Array in dem die ID, der Vorgänger (parent) und ob ein Nachfolger existiert (0 oder 1) drin steht.
Dann durchlaufe ich dieses Array und erzeuge das TreeView. Dabei erweitere ich das Array um die Objektreferenz des DIVs an den Nachfolger angehangen werden müssten.

Ich habe nur so das gefühl, dass das array etwas redundant ist, schließlich kann man xml-doks wahrscheinlich nicht ganz ohne grund mit childNodes, nextSibling etc. durchlaufen.

Naja jetzt funktioniert es jedenfalls, dank nochmal für den Tip, hat mir sehr geholfen!

lg,
Manuel