HTML <template> 标签

实例

使用 <template> 保留页面加载时隐藏的内容。使用 JavaScript 来显示:

<button onclick="showContent()">显示被隐藏的内容</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>

定义和用法

<template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。

<template> 中的内容可以稍后使用 JavaScript 呈现。

如果您有一些需要重复使用的 HTML 代码,则可以使用 <template> 标记。如果在没有 <template> 标记的情况下执行此操作,必须使用 JavaScript 创建 HTML 代码,以防止浏览器呈现这些代码。

全局属性

<template> 标签同时支持 HTML 中的全局属性。

实例

对数组中的每个项,都使用一个新的 div 元素来填充网页。每个 div 元素的 HTML 代码都在 template 元素内:

<template>

<div class="myClass">我喜欢:</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>

实例

检查 <template> 的浏览器支持:

<script>

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的浏览器不支持 template!");

}

</script>
1、本站所有资源来源于用户上传和网络,版权争议与本站无关,版权归原创者所有,如有侵权请邮件联系我们!
2、分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3、不得使用于非法商业用途,商用请购买正版,不得违反国家法律。否则后果自负!
4、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5、如有链接无法下载、失效或广告,请联系管理员处理!
6、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7、不保证所有资源都完整可用,不排除存在加密、BUG、需要授权或者残缺的可能,由于资源的特殊性,下载后一律不予退货!
8、本文来自炫客网搜集整理,如有侵权请联系管理员删除,转载请注明出处:https://www.xuankewang.com/4027.html

联系我们

173-662-005

在线咨询: QQ交谈

邮件:woowuo@126.com

工作时间:周一至周五,10:30-18:30,节假日休息

关注微信
我已知晓并同意