آموزش و يادگيري تگ template در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <template> آشنا مي‌شويم. اين تگ براي تعريف محتواي HTML است که **به صورت پيش‌فرض در صفحه نمايش داده نمي‌شود** و مي‌توان آن را با جاوااسکريپت در زمان اجرا به DOM اضافه کرد.

تگ template در HTML چيست؟

تگ <template> به شما امکان مي‌دهد بخشي از HTML را به صورت **الگو (template)** تعريف کنيد بدون اينکه در ابتدا نمايش داده شود. سپس مي‌توان با جاوااسکريپت محتواي داخل آن را کپي و در مکان‌هاي مختلف صفحه قرار داد.

مثال ساده از تگ template

<template id="myTemplate">
  <div class="card">
    <h3>عنوان کارت</h3>
    <p>توضيحات کارت</p>
  </div>
</template>

<div id="container"></div>

<script>
const template = document.getElementById("myTemplate");
const container = document.getElementById("container");

// کپي محتواي template و اضافه کردن به container
const clone = template.content.cloneNode(true);
container.appendChild(clone);
</script>

در اين مثال، محتواي تگ <template> ابتدا در صفحه ديده نمي‌شود، اما با استفاده از جاوااسکريپت در div#container نمايش داده مي‌شود.

ويژگي‌هاي مهم تگ template

نکات مهم درباره template

• محتواي داخل <template> به صورت پيش‌فرض در صفحه نمايش داده نمي‌شود.
• براي نمايش محتوا بايد با جاوااسکريپت از template.content.cloneNode(true) استفاده کنيد.
• مي‌توان چند بار از يک template استفاده کرد تا محتواي مشابه در مکان‌هاي مختلف صفحه نمايش داده شود.

براي يادگيري کامل کار با template و مديريت محتواي پويا در صفحات وب، پيشنهاد مي‌کنيم در دوره آموزش HTML و JavaScript آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML و CSS، به صفحه اصلي آموزش دون مراجعه کنيد.