HTML ＜template＞标签

玄链教育

于 2023-08-25 23:40:55 发布

阅读量1k

点赞数

分类专栏： # python语言基础文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/mask5726/article/details/132504627

版权

python语言基础专栏收录该内容

244 篇文章 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了HTML的＜template＞标签，用于保留页面加载时隐藏的内容，并可通过JavaScript展示。＜template＞适合存放可复用的HTML代码，避免浏览器直接渲染。文章包含多个实例，讲解了如何使用此标签创建和填充内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例

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

<button οnclick="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>

页面下方有更多 TIY 实例。