JavaScript Dynamische html Liste erzeugen

[Malak410]

Hallo zusammen,

ich habe eine Frage und zwar:
Wie kann ich rein mit JavaScript eine dynamische Liste erzeugen, sprich ich möchte aus einem Array (was ich vorher mit mehreren Objekten gefüllt habe) die Liste füllen. Das Endergebnis sollte dann so aussehen:

• Veranstaltung: Musterveranstaltung1
• Datum: 01.01.2019
• Uhrzeit: 12:00
  
  
• Veranstaltung: Musterveranstaltung2
• Datum: 01.02.2019
• Uhrzeit: 12:00
  
  
• Veranstaltung: Musterveranstaltung3
• ...

Die schwarzen Inhalte sollen bei jedem Listeneintrag gleich sein, die roten enstprechend abhängig von den Inhalten des jeweiligen Objekts.

Kann mich jemand behilflich sein? Das wäre top! :-)

Viele Grüße

 

[Andreas_]

Du solltest Dich mit dem DOM (Document Object Model) beschäftigen.

Grob die Herangehensweise:
- Du fügst in Dein HTML eine leere Liste mit einer eindeutigen ID ein
- Mit nListe=document.getElementById(ID der Liste) kannst Du mittels Javascript auf diese Liste zugreifen.
- Nun kannst Du mittels einer Schleife Dein Array durchlaufen. Mit newNode=document.createElement('li') kannst Du neue Nodes für die Liste erstellen.
- Wenn Du den Node mit allen Attributen erstellt hast, dann kannst Du ihn mit nListe.appendChild(newNode) unterhalb Deiner Liste einfügen.

 

[mastaqz]

Zusatz zu @Andreas_ sehr guten Erklärung:

Als Schleife für den Array ist eine forEach() sinnvoll,
dadurch hast du Zugriff auf jedes Array Element
und kannst die Inhalte dieser einzelnen Elemente direkt ansprechen.
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

[Malak410]

Vielen Dank für eure Antworten!

Ich habe mir nun etwas für die Nutzung als DOM zusammengebastelt, allerdings wird dies im Browser ignoriert.
Was muss ich im HTML Dokument test.html und in meinem testList.js tun, damit das Script bei jedem Laden der HTML-Seite direkt aufgerufen wird? Wenn ich es nur irgendwo einbinde (z.B. im head oder am ende des body), dann passiert mit dem DOM leider nichts. Im Netz habe ich bisher nur verschiedene Dinge dazu gefunden, die mich allerdings mehr verwirrt als geholfen haben.

 

[ayngush]

Schau Dir lieber mal Mustache.js oder Handlebars.js dafür an.

 

[Malak410]

Habe es nun hinbekommen! Super, danke für alle hilfreichen Antworten. :-)