template

osbo.com | HTML | Elements | template

The template HTML element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

<!doctype html>
<html>
<head>
    <script>
        var data = [
            {name: "black", rgb: "0,0,0", hex: "000000"},
            {name: "gray", rgb: "128,128,128", hex: "808080"},
            {name: "white", rgb: "255,255,255", hex: "ffffff"}
        ];
        function populate() {
            var template = document.querySelector("template");
            for (var i = 0; i < data.length; ++i) {
                var clone = template.content.cloneNode(true);
                var td = clone.querySelectorAll("td");
                td[0].textContent = data[i].name;
                td[1].textContent = data[i].rgb;
                td[2].textContent = data[i].hex;
                template.parentNode.appendChild(clone);
            }
        }
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Name
                <th>RGB
                <th>Hexadecimal
        <tbody>
            <template>
                <tr>
                    <td>
                    <td>
                    <td>
            </template>
    </table>
    <script>populate();</script>
</body>
</html>

Links

Web Hypertext Application Technology Working Group (WHATWG)

template

Syntax

HTML

Attributes

Examples

Links