Praxisbeispiel: Komplexe Strukturen einfügen

Lösung: Bild in das Fragment setzen

Das Skript setzt gleich am Anfang ein zusätzliches div-Element mit der CSS-Klasse columns ein, in dem jedes Buch zu einer Spalte wird. Am Ende von jedem der vier Iterationsschritte hängt das Skript also eine Layoutspalte ein.

const bücher = [
   { "title": "Alice im Wunderland", "autor": "Carroll, Lewis", "jahr": "2003", 
              "src": "images/buch-titel-lewis-carroll.jpg", "link": "#"},
   { "title": "Accidental Empires", "autor": "Cringely, Robert X.", "jahr": "1992", 
              "src": "images/accidental-empires.webp", "link": "#" },
   { "title": "Mummenschanz", "autor": "Pratchett, Terry", "jahr": "1997",  
              "src": "images/pratchett-mummenschanz.jpg", "link": "#" },
   { "title": "Bezaubernder April", "autor": "Elisabeth v. Armin", "jahr": "1992", 
              "src": "images/arnim-verzauberter-april.jpg", "link": "#" }	
];
const columns = document.createElement("div");
columns.className = "columns";
for (const buch of bücher) {
   const container = document.createElement("div");
   container.className = "buch";

   const title = document.createElement("p");
   title.className = "title";
   title.innerHTML = `${buch.title}\n${buch.autor}`;
   container.appendChild(title);
	
   const jahr = document.createElement("time");
   jahr.datetime = buch.jahr;
   jahr.innerText = `Erschienen ${buch.jahr}`;
   container.appendChild (jahr);
	
   const link = document.createElement("p");
   const a = document.createElement("a");
   a.href = buch.link;
   a.innerText = "Link zur Buchbesprechung";
   link.appendChild(a);
   container.appendChild(link);
	
   const figure = document.createElement("figure");
   const img = document.createElement("img");
   img.src = buch.src;
   img.alt = `${buch.title} von ${buch.autor}`;
   img.setAttribute("loading", "lazy");
   const figcaption = document.createElement("figcaption");
   figcaption.innerText = buch.title;
	
   figure.appendChild(img);
   figure.appendChild(figcaption);
   container.appendChild(figure);	
   columns.appendChild(container)
}

document.querySelector ("main").appendChild(columns);

Das ist die halbwegs formale Lösung. Eine Alternative anstelle der createElement-Anweisungen wäre innerHTML zur Erzeugung der Texte und HTML-Tags in Strings. Die innerHTML-Lösung ist der einfache Weg, ist aber auch »Quick & Dirty« mit ein paar Macken. Der formale Weg über createElement ist sauberer, besser lesbar und performanter. »Halbwegs formal« ist die Lösung, weil Attribute direkt eingesetzt werden.

Diese Lösung ist alles andere als sauber strukturiert. Wie eine bessere Struktur aussehen könnte, ist ein Kapitel für sich.