Templatki JS bez użycia jQuery

Framework jQuery zakorzenił się tak bardzo w środowisku deweloperów www, że wielu z nich „automatycznie” dodaje go do swoich projektów. Od pewnego czasu w swoich projektach, tam gdzie nie jest to konieczne, nie używam jQuery. Dzisiaj przedstawię wam jak używać templatek bez użycia frameworka jQuery.

Co to są templatki kodu HTML?

Większość osób tworzących strony www spotkała się z pojęciem templatki/szablony stron. Co w przypadku fragmentów strony, który chcemy powielić bez duplikowania kodu? Tu z pomocą przychodzą templatki kodu.

Przykład

Powyższy fragment to zestaw danych na jakich będziemy pracować zawierający obrazek, tytuł i krótki tekst.

Następnie tworzymy pętlę, w której obrobimy nasze dane. Przypisujemy konkretny item do zmiennej, następnie pobieramy naszą templatkę z kodu za pomocą funkcji querySelector(). Kolejne 3 linie przypisują nam obrazek, tytuł i tekst do konkretnych elementów templatki.

Na koniec tworzymy z templatki obiekt, a następnie wrzucamy go do odpowiedniego kontenera.

Zostało jedynie ostylować kod CSS’em i gotowe!

Podsumowanie

Powyższy sposób na templatki kodu HTML to oczywiście jeden z wielu. Moim zdaniem ten jest najprostszy. Istnieją też gotowe frameworki do tworzenia templatek, ale to temat na inną chwilę.