تگ template در HTML

  /  فرانت اند   /  HTML   /  تگ template در HTML

با استفاده از تگ template در HTML میتوانید یک بخش از محتوای سند را مخفی کنید.

مثال

در مثال زیر بخشی از محتوای سند را مخفی کردیم که برای نمایش آن از JavaScript استفاده میکنیم:

<button onclick="showContent()">نمایش محتوای مخفی</button>

<template>
<h2>گل</h2>
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/07/img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>


تعریف و کاربرد

تگ template در HTML همچون ظرفی برای نگهداری بخشی از محتوای HTML که هنگام بارگیری صفحه از کاربر پنهان است استفاده می شود.

محتوای درون تگ <template> با جاوااسکریپت به نمایش در می آید.

اگر بخشی از کد های HTML سند خود را میخواهید چندین و چند بار ایجاد کنید و تا قبل از فراخوانی از دید کاربر مخفی کنید ، بهتر است که از عنصر template استفاده کنید ، همچنین همانطور که اشاره شد برای فراخوانی و نمایش محتوای درون این تگ از JavaScript استفاده می کنیم.


پشتیبانی مرورگر ها

عنصر
<template>26.013.022.08.015.0

خواص عمومی

تگ template از خواص عمومی در HTML پشتیبانی میکند.


مثال های بیشتر

در مثال زیر بررسی می کنیم که آیا مرورگر کاربر تگ <template> را پشتیبانی می کند یا نه:

<script>
if (document.createElement("template").content) {
document.write("مرورگر شما از template پشتیبانی می کند!");
} else {
document.write("مرورگر شما از template پشتیبانی نمی کند!");
}
</script>

5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر