HTML5 <template> 标签
主题：HTML5 标签参考上一页|下一页
说明
<template> 元素用于定义在页面加载时不会立即呈现但可以通过 JavaScript 克隆并插入到文档中的 HTML 片段。
下表总结了此标签的使用上下文和版本历史。
| Placement: | 在渲染中，<template> 元素不代表任何内容 |
|---|---|
| Content: | 块、内联和文本 |
| 开始/结束标签： | 开始标签： required, 结束标签：required |
| 版本： | New in HTML5 |
语法
<template> 标签的基本语法如下：
HTML / XHTML: <template> ... </template>
下面的示例显示了 <template> 标签的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML template Tag</title>
</head>
<body>
<button type="button" onclick="showStudents();">Show Students</button>
<table id="studentsTable">
<thead>
<tr>
<th>Roll No.</th>
<th>Student Name</th>
</tr>
<thead>
<tbody>
<!-- Content will be inserted here using template dynamically -->
<tbody>
</table>
<template id="studentRow">
<tr>
<td></td>
<td></td>
</tr>
</template>
<script>
/* 通过检查来测试浏览器是否支持 HTML 模板元素
模板元素的内容属性的存在 */
if("content" in document.createElement("template")) {
// Sample array of students
var students = ["Alice", "Peter", "Harry", "John", "Clark"];
function showStudents() {
// 选择元素
var tbody = document.querySelector("#studentsTable tbody");
var template = document.querySelector("#studentRow");
// Loop through item in the students array
for(i = 0; i < students.length; i++) {
// 从模板克隆新行
var clone = template.content.cloneNode(true);
var td = clone.querySelectorAll("td");
// 将数据从数组添加到表格单元格
td[0].textContent = i + 1;
td[1].textContent = students[i];
// 将新行追加到表体中
tbody.appendChild(clone);
}
}
} else {
alert("Your browser does not support template element!");
}
</script>
</body>
</html>提示： <template> 元素的内容不会在页面加载时立即呈现，但可以稍后使用 JavaScript 呈现。 您可以在需要反复使用一些 HTML 代码的地方使用 <template> 标签，例如用行填充表格。
标签特定属性
The <template> 标签没有任何特定属性。
全局属性
与所有其他 HTML 标签一样， <template> 标签支持 HTML5 中的全局属性。
事件属性
<template> 标签还支持 HTML5 中的事件属性。
浏览器兼容性
所有主要的现代浏览器都支持 <template> 标签。
 |
基本支持—
|
进一步阅读
请参阅以下教程： HTML 图片.
Advertisements