Перейти к содержанию

<template>

Тег <template> (от англ. template — шаблон) представляет собой механизм для хранения содержимого на стороне клиента, которое не отображается в процессе загрузки страницы, но впоследствии может быть заполнено с помощью JavaScript.

Содержимое <template> — это шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты. Обычно применяется для элементов с повторяющейся структурой, вроде списков, таблиц, списков <select> и др.

Веб-компоненты

Поддержка браузерами

Can I Use template? Data on support for the template feature across the major browsers from caniuse.com.

Синтаксис

Внутри <template> располагаются пустые элементы, образующие требуемый шаблон. Повторение этих элементов и их заполнение содержимым берут на себя скрипты.

Закрывающий тег обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты.

Спецификации

Описание и примеры

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>template</title>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            td,
            th {
                padding: 4px;
                border: 1px solid #333;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Твёрдость по Моосу</th>
                    <th>Эталонный минерал</th>
                    <th>Обрабатываемость</th>
                </tr>
            </thead>
            <tbody>
                <template id="row">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td></tr
                ></template>
            </tbody>
        </table>
        <script>
            var data = [
                {
                    hardness: 1,
                    mineral: 'Тальк',
                    workability: 'Царапается ногтём',
                },
                {
                    hardness: 2,
                    mineral: 'Гипс',
                    workability: 'Царапается ногтём',
                },
                {
                    hardness: 3,
                    mineral: 'Кальцит',
                    workability: 'Царапается медью',
                },
                {
                    hardness: 4,
                    mineral: 'Флюорит',
                    workability:
                        'Легко царапается ножом, оконным стеклом',
                },
                {
                    hardness: 5,
                    mineral: 'Апатит',
                    workability:
                        'С усилием царапается ножом, оконным стеклом',
                },
                {
                    hardness: 6,
                    mineral: 'Ортоклаз',
                    workability:
                        'Царапает стекло. Обрабатывается напильником',
                },
                {
                    hardness: 7,
                    mineral: 'Кварц',
                    workability:
                        'Поддаётся обработке алмазом, царапает стекло',
                },
                {
                    hardness: 8,
                    mineral: 'Топаз',
                    workability:
                        'Поддаётся обработке алмазом, царапает стекло',
                },
                {
                    hardness: 9,
                    mineral: 'Корунд',
                    workability:
                        'Поддаётся обработке алмазом, царапает стекло',
                },
                {
                    hardness: 10,
                    mineral: 'Алмаз',
                    workability: 'Царапает стекло',
                },
            ];
            var template = document.querySelector('#row');
            for (var i = 0; i < data.length; i++) {
                var mohs = data[i];
                var clone = template.content.cloneNode(
                    true
                );
                var cells = clone.querySelectorAll('td');
                cells[0].textContent = mohs.hardness;
                cells[1].textContent = mohs.mineral;
                cells[2].textContent = mohs.workability;
                template.parentNode.appendChild(clone);
            }
        </script>
    </body>
</html>

Ссылки

Комментарии