HTML <sjabloon> Tag
Voorbeeld
Gebruik <template> om inhoud te hou wat versteek sal word wanneer die bladsy laai. Gebruik JavaScript om dit te vertoon:
<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() {
var temp =
document.getElementsByTagName("template")[0];
var clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die <template>merker word as 'n houer gebruik om sekere HTML-inhoud vir die gebruiker weggesteek te hou wanneer die bladsy laai.
Die inhoud binne <template>kan later weergegee word met 'n JavaScript.
Jy kan die <template>merker gebruik as jy een of ander HTML-kode het wat jy oor en oor wil gebruik, maar nie totdat jy daarvoor vra nie. Om dit sonder die <template>merker te doen, moet jy die HTML-kode met JavaScript skep om te verhoed dat die blaaier die kode weergee.
Blaaierondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Globale eienskappe
Die <template>merker ondersteun die globale kenmerke in HTML .
Meer voorbeelde
Voorbeeld
Vul die webblad met een nuwe div-element vir elke item in 'n skikking. Die HTML-kode van elke div-element is binne die sjabloonelement:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var 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>
Voorbeeld
Gaan blaaierondersteuning na vir <sjabloon>:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>