<template>
Misol
Sahifa yuklanganda yashirin turadigan kontentni saqlash uchun <template> dan foydalaning. Uni ko‘rsatish uchun JavaScript’dan foydalaning:
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<template> tegi sahifa yuklanganda foydalanuvchidan yashirin turadigan HTML kontentni saqlash uchun konteyner sifatida ishlatiladi.
<template> ichidagi kontentni keyinroq JavaScript yordamida render qilish mumkin.
Agar sizda qayta-qayta ishlatmoqchi bo‘lgan, lekin so‘ralmaguncha ko‘rsatilmasligi kerak bo‘lgan HTML kodi bo‘lsa, <template> tegidan foydalanishingiz mumkin. Buni <template> tegidan foydalanmasdan amalga oshirish uchun brauzer kodni render qilmasligi maqsadida HTML kodini JavaScript yordamida yaratishingiz kerak.
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Global atributlar
<template> tegi HTML’dagi global atributlarni qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
Massivdagi har bir element uchun veb-sahifaga bittadan yangi div elementini qo‘shing. Har bir div elementining HTML kodi template elementi ichida joylashgan:
<template>
<div class="myClass">I like: </div>
</template>
<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
let temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
O‘zingiz sinab ko‘ring »
Misol
Brauzer <template> ni qo‘llab-quvvatlashini tekshirish:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!