Web速查-索引

定义

<template> 标签是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。

可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

虽然，在加载页面的同时,解析器确实处理 template 元素的内容，这样做只是确保这些内容是有效的。然而，元素的内容不会被渲染。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>

</head>

<body>

    <table id="producttable">

        <thead>

        <tr>

            <td>序列号</td>

            <td>名称</td>

        </tr>

        </thead>

        <tbody>

        <!-- 现有数据可以可选地包括在这里 -->

        </tbody>

    </table>



    <template id="productrow">

        <tr>

            <td class="record"></td>

            <td></td>

        </tr>

    </template>



    <script>

        // 通过检查来测试浏览器是否支持HTML模板元素 

        // 用于保存模板元素的内容属性。

        if ('content' in document.createElement('template')) {



            // 使用现有的HTML tbody实例化表和该行与模板

            var t = document.querySelector('#productrow'),

                td = t.content.querySelectorAll("td");

            td[0].textContent = "1235646565";

            td[1].textContent = "FishC-U";



            // 克隆新行并将其插入表中

            var tb = document.getElementsByTagName("tbody");

            var clone = document.importNode(t.content, true);

            tb[0].appendChild(clone);



            // 创建一个新行

            td[0].textContent = "0384928528";

            td[1].textContent = "FishC-Key";



            // 克隆新行并将其插入表中

            var clone2 = document.importNode(t.content, true);

            tb[0].appendChild(clone2);



        } else {

            // 找到另一种方法来添加行到表，因为不支持HTML模板元素。

        }

    </script>

</body>

</html>
序列号 名称

视频讲解