一、html5中的template标签
template标签，顾名思义，模板的意思
HTML5提供的新标签，更加规范和语义化
可以把列表项放入template标签中，然后进行批量渲染。
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。
二、template标签操作的属性和方法
content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，结构是这样的，可以看到中间有一层#document-fragment。通过该属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点，直接输出对应的Dom对象如图所示：
<template id="tem">
<div id="div1">我是template</div>
</template>
<script>
let o = document.getElementById("tem");
console.log(o.content.nodeName);//#document-fragment
var div1 = template.content.querySelectorByTagName('div')[0];
</script>
最后举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<template>
<div>
<ul>
<li>模板1</li>
<li>模板2</li>
<li>模板3</li>
</ul>
</div>
</template>
<button onclick="display()">点击我显示</button>
<script>
function display(){
var temp = document.getElementsByTagName("template")[0];
//通过cloneNode方法把获取到的节点再复制一份
var clo = temp.content.cloneNode(true);
document.body.appendChild(clo);
}
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。