Template element

HTML kursu · İleri seviye · Ders 35/56

<template> ile yeniden kullanılabilir HTML şablonu yazarsın.

Template elementi nedir?

<template> etiketi sayfada görünmeyen ama DOM'da tutulan bir HTML şablonudur. İçindeki içerik render edilmez: tarayıcı onu ayrıştırır ama ekranda göstermez. Böylece aynı yapıyı tekrar tekrar kullanabilirsin.

Bir liste öğesi, bir satır ya da bir modal iskeleti tanımlayabilirsin. JavaScript ile template.content üzerinden kopyasını alıp sayfaya eklersin. Bu yüzden template, yinelenen arayüz parçalarının temel taşıdır.

Template içinde neler olabilir?

<template> içerisine normal bir belgeye koyabileceğin her şeyi koyabilirsin: <div>, <h2>, <p>, <img>, hatta <style> ve <script>. Tarayıcı bunları ayrıştırır ama çalıştırmaz.

İçerik yalnızca sen template.content'i kopyalayıp sayfaya eklediğinde canlanır. Bu özellik, bir kart ya da satır yapısını bir kez yazıp birçok kez kullanmak için idealdir.

template'i klonlama

template'i kullanmak için önce template.content özelliğine ulaşırsın. Bu, şablonun içindeki düğümleri tutan bir DocumentFragment'tır. cloneNode(true) ile derin kopyasını alıp başka bir yere eklersin.

Böylece aynı yapıyı onlarca kez oluşturabilir, her kopyaya farklı veri yerleştirebilirsin. Ham HTML'i tekrar yazmak yerine, şablonu çoğaltmak daha temiz ve hızlıdır.

Uygulama İçeriği dolu bir template yaz

Body içine bir <template> ekle. İçinde bir <h2> ve bir <p> olsun. <h2>'nin metni Başlık, <p>'nin metni Açıklama. olsun.

Örnek çözümü göster

<body>
  <template>
    <h2>Başlık</h2>
    <p>Açıklama.</p>
  </template>
</body>

Kendini test et

<template> etiketinin en belirgin özelliği nedir?
- İçeriği sayfada render edilmez ama DOM'da tutulur.
- İçeriği otomatik olarak sayfaya ekler.
- Yalnızca JavaScript dosyalarında çalışır.
- Sadece metin kabul eder, başka etiket almaz.
Cevabı göster

İçeriği sayfada render edilmez ama DOM'da tutulur. — Doğru. template içeriği sayfada görünmez ama kopyalanmaya hazırdır.

template etiketini kapat

<template>
  <h2>Haber____
</template>

Cevabı göster

<template>
  <h2>Haber</h2>
</template>

template terimlerini eşleştir

template

HTML şablon etiketi
inert

sayfada render edilmez
content

şablonun DOM kökü
cloneNode

şablonu kopyalar

İleri seviye bölümündeki tüm dersler

Template element