網頁

▼

2019/2/3

HTML 5 <template>

HTML的<template>的作用。


<template>元素是HTML 5才有的新元素。

<template>中的內容不會被瀏覽器渲染，其作用為保存HTML片段(HTML fragments)，然後透過JavaScript複製並插入到文件中，如此就可以重用裡面的內容。

例如下面的html在瀏覽器開啟後看不見任何文字內容，因為<template>不被瀏覽器渲染。

<html>
<head>
</head>
<body>
<template>
    <h1>hello world</h1>
</template>
</body>
</html>

下面使用JavaScript來複製<template>並加在<body>的子節點。

<html>
<head>
</head>
<body>
<template>
    <h1>hello world</h1>
</template>
</body>
</html>

<script>
function showContent() {
    var temp = document.getElementsByTagName("template")[0];
    var clon = temp.content.cloneNode(true);
    document.body.appendChild(clon);
}
showContent();
showContent();
</script>

因為呼叫了兩次showContent()，所以畫面上會出現兩個hello world文字。



在Chrome 開發者模式Elements內容如下：

<html>
    <head>
    </head>
    <body>
        <template>
            <h1>hello world</h1>
        </template>
        <script>
            function showContent() {
                var temp = document.getElementsByTagName("template")[0];
                var clon = temp.content.cloneNode(true);
                document.body.appendChild(clon);
            }
            showContent();
            showContent();
        </script>
        <h1>hello world</h1>
        <h1>hello world</h1>
    </body>
</html>

<template>中的script不會被執行，圖面不會載入，直到<template>實例化(instantiated)。

<template>中內容不存在document中，因此使用document.getElementById()或querySelector()不會回傳<template>的子節點。

<template>幾乎可以擺在文件中任何位置。

<template>只允許使用全域屬性(Global attributes)


沒有留言:

張貼留言