HTML <template>标签,容纳隐藏内容

<template>标签

<template>是一个容器,用于容纳那些在页面加载时被隐藏的HTML元素,如果需要将其呈现给浏览器端的用户,可以使用JavaScript来操作。template为块元素,包含起始标签和结束标签。

<template></template>

<template>标签实例代码,及在线编辑器

<div id='d1'>
<button onclick='showTemplate()'>显示隐藏的template</button>
<template id='t1'>
  <p>这是包含在template中的元素p,运行之后,该内容表现为隐藏,当点击按钮时,该内容将通过JavaScript来呈现。</p>
</template>
</div>

<script>
function showTemplate() {
  var t = document.getElementById("t1");
  var c = t.content.cloneNode(true);
  document.getElementById('d1').appendChild(c);
}
</script>

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.