dynamische Liste mit Grafiken und Verweisen

[Carsten Pieper]

Hallo zusammen!

Ich möchte gerne für www.dyckburg.de eine Sitemap machen. Das stelle ich mir so vor, alsdass eine ungeordnete Liste zur Verfügung steht, jedes <li>-Element besteht aus einem kleinen +-Zeichen zum öffnen des Baumes, und einem Link, der den jeweilgen Hauptast des Baumes öffnet. Klickt man nun auf das Plus soll sich der Baum halt weiter öffnen, soweit klappt auch alles schon.

Nun soll aber noch mehrere Stufen weiter verzweigt werden. Das bedeutet, das ich dynamisch einem Listeneintrag eine ungeordnete Liste zuweisen möchte, deren Listeneinträge der Struktur
<li>
  <a href="javascript:unterbaum_xyz_öffnen()">
    <img src="plus.jpg"></a>
  <a href="javascript:unterbaum_xyz_hauptseite_anzeigen()">
    Unterbaum xyz</a>
</li>

Dies habe ich versucht mit
neu = document.createElement("<li><a href='javascript:heidehof()'><img src="plus.jpg"></a><a href='javascript:verweis('../geo/heidehof.html')'>Heidehof</a></li>");
geographieListe.appendChild(neu);

Dabei wurde zwar eine neue Zeile eingefügt, die ist aber leer, kein Verweis, keine Grafik, kein Text. Auch eine abgespeckte Version hat nicht funktioniert.

Nun meine Frage: Wie kann ich solche mehrere verschiedene Elemente enthaltende hierarchisch angeordnete Listen dynamisch erzeugen?

Die Beschreibung und der kurze Quelltext-Ausschnitt reichen sicherlich nicht aus, um mein Problem zu verstehen, deshalb habe ich die URL der Sitemap mit angegeben.

Herzlichen Dank für Eure Mühen und einen schönen Sonntagabend noch,

Carsten

[Thomas Meinike]

Hallo,

Dies habe ich versucht mit
neu = document.createElement("<li><a href='javascript:heidehof()'><img src="plus.jpg"></a><a href='javascript:verweis('../geo/heidehof.html')'>Heidehof</a></li>");
geographieListe.appendChild(neu);

Dabei wurde zwar eine neue Zeile eingefügt, die ist aber leer, kein Verweis, keine Grafik, kein Text. Auch eine abgespeckte Version hat nicht funktioniert.

Etwas in dieser Art wirst Du brauchen:

var l,a1,a2,i,t;
  l=document.createElement("li");
  a1=document.createElement("a");
  a2=document.createElement("a");
  i=document.createElement("img");
  t=document.createTextNode("Heidehof");
  a1.setAttribute("href","javascript:heidehof()",true);
  a2.setAttribute("href","javascript:verweis('../geo/heidehof.html')",true);
  i.setAttribute("src","plus.jpg",true);
  a1.appendChild(i);
  a2.appendChild(t);
  l.appendChild(a1);
  l.appendChild(a2);

// wenn im HTML-Teil vorkommt:
  // <ul id="liste">...</ul>

document.getElementById("liste").appendChild(l);

MfG, Thomas

[Carsten Pieper]

Hallo Thomas, hi zusammen!

Jo, herzlichen Dank, das ist die Lösung.
An folgender Stelle lag wohl mein Problem, ich hatte das "document.getElementById" weggelassen, und irgendwie haben meine Versuche, einer ul ein li-Element und dem wiederum ein a-Element zuzuweisen, nicht geklappt, sodass ich es versucht hatte, einem Link ein Listeneintrag zuzuordnen, was natürlich nicht wirklich befriedigend war.

document.getElementById("liste").appendChild(l);

Also ganz herzlichen Dank und viele Grüße,

Carsten